CSS 样式 Firefox/Safari/Chrome答案

【问题标题】：CSS Style Firefox/Safari/ChromeCSS 样式 Firefox/Safari/Chrome
【发布时间】：2011-02-25 18:47:02
【问题描述】：

我对浏览器之间的 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>

【问题讨论】：

IE和Opera呢？跳过该测试不是一个好主意，尤其是对于 IE。

标签： html css firefox webkit

【解决方案1】：

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

在 Quirks 模式下，浏览器违反当代网络格式规格以避免 “破坏”页面根据当时流行的做法 1990 年代后期。 不同的浏览器实现不同的怪癖。 Internet Explorer 6、7 和 8， Quirks 模式被有效冻结 IE 5.5. 在其他浏览器中，Quirks 模式与几乎标准模式。

【讨论】：

【解决方案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>

【讨论】：

感谢您的信息。但问题也在这里：firefox dont align input items: On Webkit (Safari/Chrome) img534.imageshack.us/img534/7320/safariw.png On Firefox img706.imageshack.us/img706/1109/firefoxo.png

【解决方案3】：

添加正确的 DOCTYPE 后：还实现 YUI(R)eset CSS File 女巫将标准化主要 css 差异浏览器往往有不同。

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

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

【讨论】：

【解决方案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>

【讨论】：

这不是一个有效的文档类型，尝试类似 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【解决方案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>

【讨论】：

【解决方案6】：

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

【讨论】：