CSS样式Firefox / Safari / Chrome

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模式中，浏览器违反当代Web格式规范，以避免根据20世纪90年代末普遍存在的做法“打破”创建的页面。 不同的浏览器实现不同的怪癖。 在Internet Explorer 6,7和8中，Quirks模式实际上已冻结IE 5.5。 在其他浏览器中，Quirks模式与Almost Standards模式有一些偏差。

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

解决方案1
1 2010-05-30 20:56:46

解决方案2
1 2010-05-31 19:14:57

解决方案3
0 2010-05-30 21:06:56

解决方案4
0 2010-05-31 06:00:32

解决方案5
0 2010-06-01 21:13:49

解决方案6
0 2010-10-16 22:29:49

CSS样式Firefox / Safari / Chrome

问题描述

6 个解决方案

解决方案1 1 2010-05-30 20:56:46

解决方案2 1 2010-05-31 19:14:57

解决方案3 0 2010-05-30 21:06:56

解决方案4 0 2010-05-31 06:00:32

解决方案5 0 2010-06-01 21:13:49

解决方案6 0 2010-10-16 22:29:49

解决方案1
1 2010-05-30 20:56:46

解决方案2
1 2010-05-31 19:14:57

解决方案3
0 2010-05-30 21:06:56

解决方案4
0 2010-05-31 06:00:32

解决方案5
0 2010-06-01 21:13:49

解决方案6
0 2010-10-16 22:29:49