Question

我遇到了在所有浏览器中对齐输入文本字段，密码文本字段和登录按钮的问题。如果它在一个浏览器上运行，则它不适用于另一个浏览器。有什么工作吗？

谷歌浏览器

的工作原理

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;
}

总结差异：

Chrome需要：

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

Firefox需要：

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

IE要求：

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

感谢任何帮助。

感谢。

Answer 1

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

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

http://www.cssreset.com/

希望有所帮助。

Answer 2

你应该这样使用：

我忘了提及，复制并粘贴下面的行，里面和标记然后.webkit将起作用

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

header input[type=submit]{
    font-size: 10px; /* standard */
    font-size: 10px\9 /* IE 8 and below*/ 
    padding: 9px\9; /* IE 8 and below */
    *padding: 15px\9; /* IE 7 and below */
    _padding: 16px\9; /* IE 6 */
}

对于chrome：

.webkit header input[type=submit] {
  font-size: 10px; 
  padding: 8px;
  margin-top: 2px;
}

Reference Link

所有浏览器的CSS对齐

2 个答案: