Question

我的浏览器之间的CSS差异有问题。我有一个简单的输入文本字段和一个提交按钮。应该安排。使用webkit（safari / webkit）一切看起来都很好，但是firefox并没有这样做。有没有人知道什么是错的？

我写了一个测试html页面：

<html>
<head>
<style type="text/css">

#input {
    background: none repeat scroll 0 0 white;
    border-color: #DCDCDC;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    font: 13px "Lucida Grande",Arial,Sans-serif;
    margin: 0;
    padding: 5px 5px 5px 15px;
    width: 220px;
    outline-width: 0;
 height: 30px;
}

#submit {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
    font: 13px "Lucida Grande",Arial,Sans-serif;
    margin: 0;
    outline-width: 0;
 height: 30px;
    padding: 5px 10px;
}

</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Answer 1

您没有使用Doctype，因此浏览器会回归到quirks mode：

在Quirks模式下浏览器违反当代网络格式规格以避免 “打破”页面根据在美国流行的做法 90年代后期。 不同的浏览器实现不同的怪癖。 In Internet Explorer 6,7和8 ,. Quirks模式有效地冻结了IE 5.5。 在其他浏览器中，Quirks模式有一些偏差几乎标准模式。

Answer 2

你想用盒子的背景做什么？如果它具有白色背景，它看起来真的很复杂，在这种情况下，您的页面可以简化为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
<style type="text/css">
#input, #submit {
    background-color: #fff;
    border: 1px solid #DCDCDC;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Answer 3

添加正确的DOCTYPE后：还实现了YUI（R）eset CSS File将标准化的主要css差异浏览器往往会有所不同。

http://developer.yahoo.com/yui/reset/

这将为您提供我们称之为“干净的石板”，在您导入YUI（R）之后您应该定义您的defualt css值，例如填充，边距，a，img等您的自己，然后继续构建您的设计。

Answer 4

感谢您的信息，但我遇到了同样的问题：（

我还简化了一点：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
<style type="text/css">

#input {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
}

#submit {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
}

</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Answer 5

我现在有一个工作版！谢谢你的帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <style type="text/css">
     input {
      background-color: #fff;
      border: 1px solid #dcdcdc;
      font: 13px "Lucida Grande", Arial, sans-serif;
      margin: 0;
      outline: none;
     }

     input#input {
      border-right-width: 0;
      padding: 5px 5px 5px 15px;
      width: 220px;
     }

     input#submit {
      padding: 4px 10px;
     }
     </style>
    </head>
    <body>
     <input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
    </body>
    </html>

Answer 6

我发现为输入标记设置高度和宽度属性值可以修复浏览器之间的差异。

CSS样式Firefox / Safari / Chrome

6 个答案: