1

我在所有浏览器中对齐输入文本字段、密码文本字段和登录按钮时遇到问题。如果它适用于一种浏览器，则它不适用于另一种浏览器。有什么解决办法吗？

它在谷歌浏览器中的工作原理：

header #login_button
{
    padding: 8px;
    border-radius: 0px 6px 6px 0px;
    float: right;
    margin-top: 2px;
}

header input[type=submit]
{
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 10px;
}

它在Internet Explorer中的工作原理

header #login_button
{
    padding: 9px;
    border-radius: 0px 6px 6px 0px;
    float: right;
}

header input[type=submit]
{
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 9px;
}

以及它在Firefox中的工作原理

header #login_button
{
    padding: 7px;
    border-radius: 0px 6px 6px 0px;
    float: right;
}

header input[type=submit]
{
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 9px;
}

简单总结一下区别：

铬要求：

font-size:10px;
padding: 8px;
margin-top: 2px;

火狐需要： 

font-size: 9px;
padding: 7px;

IE 要求： 

font-size: 9px;
padding: 9px;

任何帮助表示赞赏。

谢谢。

4

2 回答 2

2

我认为您不需要为不同的浏览器编写不同的样式。您可以使用类似normalize.css或reset.css来自以下任何内容的内容。这些 CSS 文件具有必要的样式和技巧，以使您的 html 在所有浏览器中看起来几乎完全相同。

http://necolas.github.com/normalize.css/

http://www.cssreset.com/

希望有帮助。

于 2012-12-21T05:49:53.587 回答
-2

你应该这样使用：

我忘了提，复制并粘贴下面的行，里面和标签然后.webkit就可以了

 <pre>
    <script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
    </pre>

标题输入[类型=提交]{
    字体大小：10px；/* 标准 */
    font-size: 10px\9 /* IE 8 及以下*/
    填充：9px\9；/* IE 8 及以下 */
    *填充：15px\9；/* IE 7 及以下 */
    _padding: 16px\9; /* IE 6 */
}

对于铬：

.webkit 标头输入[type=submit] {
  字体大小：10px；
  填充：8px；
  边距顶部：2px；
}

参考链接

于 2012-12-21T05:17:20.457 回答