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

Posted 2021-04-13

我想要一个textarea是500px，这是我用于textarea的CSS：

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

我注意到IE和Chrome默认有一个1px边框，另一方面FF有一个2px边界，这导致textarea是502px而不是500px，任何解决方法？

只是一个注释，我可以明确指定texarea边框宽度，即。 border-width：1px，但这里的问题是它与IE不能很好地工作（当边框设置为1px时，IE中的默认textarea边框在视觉上看起来不正常），我可以更改边框颜色但是我我不想这样做，我更喜欢保留默认的浏览器样式，我只想在所有浏览器中宽度相同而不更改默认样式或将颜色设置为边框，这可能吗？

答案

您可以使用文档顶部的重置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"> 

另一答案

我们倾向于为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的作品

等等...

另一答案

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

另一答案

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

这根本不符合逻辑。

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