跨浏览器输入字段宽度程式化

我有一种运送/账单输入的形式和我有麻烦造型输入字段是相同的宽度......跨浏览器输入字段宽度程式化

问题：
-a场<input type="text" size="X" />出现在不同的浏览器中以不同的尺寸渲染（见link）。
- 另外，选择的字段似乎也以不同的方式呈现。
-Chrome/safari似乎没有响应选择字段的font-size属性。

任何有关如何设置文本输入和选择字段大小的跨浏览器指导将非常有帮助。

我必须得到每个浏览器有不同的表格吗？只是为了这些输入字段？ -thanks

来源

2010-03-16 Derek Adair

首先删除内联“大小”属性。您应该使用CSS来设置输入表单的样式：

input[type="text"] { 
    width: 100px; 

    /* You can also style padding, margins and everything else, 
    * just remember that inputs of type "text" can only be one line. 
    */ 
}

请勿将[type =“text”]用作选择器。在本例中，我只是将它用于与“text”类型的输入字段相关联，但它没有完全支持跨浏览器。你应该给你的文本输入字段自己的类风格化。

此外，不要忘了你的CSS重置，以确保您的利润率，边界等。人。重置所有浏览器。 http://meyerweb.com/eric/tools/css/reset/

来源

2010-03-16 16:58:49 dclowd9901

其实，使用eric meyer reset，并使用css来设置宽度，正如你所解释的，在比较webkit和IE7时，并不是所有的输入字段都有相同的宽度 - > IE9 – 2011-05-18 10:06:38

以我的经验，他们是休息时间。例如，盒子模型有很多愚蠢的不一致之处：如何将输入字段放入其父盒子的宽度的100％。通常情况下，您可以通过将父框设置为100％宽度，然后设置内框的边距或填充参数来实现此目的，但由于输入字段是自包含的，因此无法在任何平台中创建方式将文本框的宽度与其父容器保持一致（而不是其他方法是干净的或语义的）。理想情况下，框和字段应该有一个outsideWidth定义。 – dclowd9901 2011-05-18 15:54:01

此答案不提供输入框的一致大小。它有一些有价值的信息，但没有回答这个问题。 – BishopZ 2013-05-31 14:38:08

现在，可以使用已达到体面的浏览器支持的ch单位来标准化“大小”输入的宽度。

不幸的是，它仍然不可能写：

input[size] { 
    width: attr(size) "ch"; 
}

因此，我们要的风格的宽度，我们知道我们将使用：

input[size="10"] {width: 10ch;} 
input[size="20"] {width: 20ch;} 
input[size="30"] {width: 30ch;} 
/* etc. */

这可以很容易地使用自动化一个CSS预处理器。

UPDATE：

我做了一个test fiddle。从今天开始（2018年2月），这个版本在Windows 10上使用Chrome 63，Edge 41，FF 58.在IE 11上，它失败了。我没有尝试过OS X.

来源

2016-07-15 09:50:31 xfra35

太糟糕“ch”实际上并不适用于输入大小。例如。与等宽字体，为了得到一个显示30个字符的输入框，在IE上我必须设置37ch，并在Chrome 33ch上。在我看来，这几乎是无用的。 – user9645 2018-02-06 18:14:42

我做了一个[测试小提琴]（https://jsfiddle.net/bujr1d94/1/）。在Windows 10上，这与Chrome 63，Edge 41，FF 58一起工作。在IE 11上，它失败。我还没有尝试过OS X. – xfra35 2018-02-07 08:57:50

跨浏览器输入字段宽度程式化

回答

相关问题