如何在IE和Firefox中使textarea具有相同的宽度?

时间:2008-12-27 13:57:00

标签: css cross-browser

我希望有一个500px的textarea,这是我用于textarea的CSS:

width: 498px;
padding: 0px;
margin: 0px;

我注意到默认情况下IE和Chrome的边框为1px,另一方面,FF有2px边框,导致textarea为502px而不是500px ,任何解决方法?

只需注意,我可以明确指定texarea边框宽度,即。 border-width:1px,但问题在于它与IE不兼容(当边框设置为1px时,IE中的默认textarea边框在视觉上看起来不正常),我可以更改边框颜色,但我不想这样做,我更喜欢保留默认的浏览器样式,我只想在所有浏览器中宽度相同而不更改默认样式或将颜色设置为边框,这有可能吗?

4 个答案:

答案 0 :(得分:8)

您可以使用文档顶部的重置CSS表格将所有浏览器的默认样式设置为相同。我自己喜欢YUI reset CSS。这应该设置所有控件的基本样式在所有浏览器中都是相同的,这应该允许更可预测的布局。

IMO,如果你让每个浏览器都有自己的风格(甚至可以由用户自定义!),那么你正在为你的应用程序设置一个不可预测的风格,问题突然出现在你从未想过它们的地方将。最好使用重置CSS,然后相应地设置应用程序的样式。如果你查看雅虎的网站(参考),他们也会有自己的“基础”CSS,你可以从这开始,这是非常酷。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css"> 

答案 1 :(得分:0)

我们倾向于为IE和FF创建单独的样式表来解决他们的“怪癖”。然后可以使用一小段代码来确保使用正确的样式表。

<!--[if lte IE 6]> works for < than IE 6
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->

还有  适用于IE 6

等...

答案 2 :(得分:0)

我们使用jQuery来装饰我们的html元素,并让它处理跨浏览器问题。

答案 3 :(得分:0)

从本质上讲,您很遗憾浏览器的默认设置与每个浏览器不同,但不希望自己直接更改这些属性。

这没有意义。

和其他人一样,我建议使用重置样式表(我是Eric Meyer的忠实粉丝),然后按照您想要的方式设置边框样式。简单。明确。没有缺点。