CSS样式Firefox/Safari/Chrome

Question

CSS样式Firefox/Safari/Chrome

5

我在不同浏览器之间遇到了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>

- patrick

IE和Opera怎么办？跳过这个测试不是一个好主意，特别是对于IE浏览器。 - Manius

6个回答

1

您没有使用文档类型，因此浏览器会退回到怪异模式：

在怪异模式下，浏览器违反了当代Web格式规范，以避免破坏按照20世纪90年代流行的实践编写的页面。 不同的浏览器实现不同的怪癖。 在Internet Explorer 6、7和8中，怪异模式有效地冻结了IE 5.5。 在其他浏览器中，怪异模式是几个与准标准模式略有不同的偏差。

- Marcel Korpel

0

谢谢您提供的信息，但我仍然遇到同样的问题 :(

我也稍微简化了一下：

<!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>

- Patrick

那不是一个有效的文档类型，尝试使用类似于 <!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"> - Kerry Jones

0

我现在有一个可用的版本了！感谢你的帮助！

<!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>

- Patrick

0

在添加正确的DOCTYPE后，还要实现YUI(R)eset CSS文件，这将标准化不同浏览器之间存在的主要CSS差异。

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

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

- RobertPitt

0

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

- Xhezairi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kerry Jones · Accepted Answer

你想用盒子的背景做什么？如果只是要一个白色背景，那看起来真的很复杂。如果是这样的话，你的页面可以简化为以下内容：

<!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>