I want to have a textarea that's 500px, this is the CSS I use for the textarea:
我想要一个500px的textarea,这是我用于textarea的CSS:
width: 498px;
padding: 0px;
margin: 0px;
I noticed IE and Chrome have a 1px border by default, on the other hand FF have a 2px border which results the textarea to be 502px instead of 500px, any workarounds?
我注意到IE和Chrome默认有1px边框,另一方面FF有2px边框,这导致textarea为502px而不是500px,任何解决方法?
Just a note, I could explicitly specify the texarea border width, ie. border-width: 1px, but the problem here is that it doesn't work nicely with IE (the default textarea border in IE doesn't visually look ok when the border is set to 1px), I could change the border color but I don't want to do this, I prefer to keep the default browsers styles, I just want the width to be the same in all browsers without changing the default styles or setting a color to the border, is this possible?
只是一个注释,我可以明确指定texarea边框宽度,即。 border-width:1px,但这里的问题是它与IE不能很好地工作(当边框设置为1px时,IE中的默认textarea边框在视觉上看起来不正常),我可以更改边框颜色但是我我不想这样做,我更喜欢保留默认的浏览器样式,我只想在所有浏览器中宽度相同而不更改默认样式或将颜色设置为边框,这可能吗?
4 个解决方案
#1
You can set all of your browsers' default styles to be the same by using a Reset CSS sheet at the top of your document. I like the YUI reset CSS myself. That should set the base styles for all of the controls to be the same across all browsers to begin with, and that should allow for a more predictable layout.
您可以使用文档顶部的重置CSS工作表将所有浏览器的默认样式设置为相同。我自己喜欢YUI重置CSS。这应该设置所有控件的基本样式在所有浏览器中都是相同的,这应该允许更可预测的布局。
IMO if you let each browser have its own style (which can even be customized by the user!) , you're on the road to having an unpredictable style for your application, with problems popping up in places you never thought they would. Better to use a reset CSS and then style your applications accordingly. If you checkout yahoo's site (referenced), they'll also have their own "base" CSS that you can start from, which is pretty cool.
IMO如果你让每个浏览器都有自己的风格(甚至可以由用户自定义!),那么你正在为你的应用程序设置一个不可预测的风格,在你从未想过的地方会出现问题。最好使用重置CSS,然后相应地设置应用程序的样式。如果你查看雅虎的网站(参考),他们也会有自己的“基础”CSS,你可以从这开始,这是非常酷的。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
#2
We tend to create separate style sheets for IE and FF to get around their 'quirks'. A simple bit of code can then be used to ensure the correct style sheet is used.
我们倾向于为IE和FF创建单独的样式表以绕过他们的“怪癖”。然后可以使用一小段代码来确保使用正确的样式表。
<!--[if lte IE 6]> works for < than IE 6
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->
There is also works for IE 6
还有IE 6的作品
etc...
#3
we use jQuery to decorate our html elements and let it deal with cross browser issues.
我们使用jQuery来装饰我们的html元素,并让它处理跨浏览器问题。
#4
In essence you are deploring that the browser defaults are not the same with every browser but don't want to change those properties yourself directly.
从本质上讲,您很遗憾浏览器默认值与每个浏览器不同,但不希望自己直接更改这些属性。
This does not make sense.
这根本不符合逻辑。
Like others I'd recommend using a reset stylesheet (I'm a big fan of Eric Meyer's) and then style the borders exactly the way you want them. Easy. Clear. No downsides.
和其他人一样,我建议使用重置样式表(我是Eric Meyer的粉丝),然后按照你想要的方式设置边框样式。简单。明确。没有缺点。
#1
You can set all of your browsers' default styles to be the same by using a Reset CSS sheet at the top of your document. I like the YUI reset CSS myself. That should set the base styles for all of the controls to be the same across all browsers to begin with, and that should allow for a more predictable layout.
您可以使用文档顶部的重置CSS工作表将所有浏览器的默认样式设置为相同。我自己喜欢YUI重置CSS。这应该设置所有控件的基本样式在所有浏览器中都是相同的,这应该允许更可预测的布局。
IMO if you let each browser have its own style (which can even be customized by the user!) , you're on the road to having an unpredictable style for your application, with problems popping up in places you never thought they would. Better to use a reset CSS and then style your applications accordingly. If you checkout yahoo's site (referenced), they'll also have their own "base" CSS that you can start from, which is pretty cool.
IMO如果你让每个浏览器都有自己的风格(甚至可以由用户自定义!),那么你正在为你的应用程序设置一个不可预测的风格,在你从未想过的地方会出现问题。最好使用重置CSS,然后相应地设置应用程序的样式。如果你查看雅虎的网站(参考),他们也会有自己的“基础”CSS,你可以从这开始,这是非常酷的。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
#2
We tend to create separate style sheets for IE and FF to get around their 'quirks'. A simple bit of code can then be used to ensure the correct style sheet is used.
我们倾向于为IE和FF创建单独的样式表以绕过他们的“怪癖”。然后可以使用一小段代码来确保使用正确的样式表。
<!--[if lte IE 6]> works for < than IE 6
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->
There is also works for IE 6
还有IE 6的作品
etc...
#3
we use jQuery to decorate our html elements and let it deal with cross browser issues.
我们使用jQuery来装饰我们的html元素,并让它处理跨浏览器问题。
#4
In essence you are deploring that the browser defaults are not the same with every browser but don't want to change those properties yourself directly.
从本质上讲,您很遗憾浏览器默认值与每个浏览器不同,但不希望自己直接更改这些属性。
This does not make sense.
这根本不符合逻辑。
Like others I'd recommend using a reset stylesheet (I'm a big fan of Eric Meyer's) and then style the borders exactly the way you want them. Easy. Clear. No downsides.
和其他人一样,我建议使用重置样式表(我是Eric Meyer的粉丝),然后按照你想要的方式设置边框样式。简单。明确。没有缺点。