CSS风格火狐/ Safari浏览器/ Chrome

我有浏览器之间的CSS差异问题。我有一个简单的输入文本框提交按钮。应该安排。与webkit（safari/webkit）一切看起来不错，但Firefox不做。有没有人有一个想法什么是错的？CSS风格火狐/ Safari浏览器/ Chrome

我已经写了一个小测试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>

来源

2010-05-30 patrick

IE和Opera怎么样？跳过这个测试不是一个好主意，特别是对于IE。 – Manius 2010-10-16 22:38:13

您没有使用一个DOCTYPE，这样浏览器就回落到quirks mode：

在怪癖模式浏览器违反当代网页格式规范，以避免根据创作的“破”页面在20世纪90年代后期流行于。 不同的浏览器实现不同的怪癖。 Internet Explorer 6,7和8，怪癖模式被有效冻结IE 5.5。 在其他浏览器中，Quirks模式与几乎标准模式有一些偏差。

来源

2010-05-30 20:56:46

加入您的正确的DOCTYPE后：也实现了YUI（R）ESET CSS文件女巫将标准化的主要区别CSS浏览器往往有不同。

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

这会给你就是我们所谓的“清白”，已导入YUI（R）后，你应该定义你的defualt CSS值，如填充，保证金，，IMG等你的自我然后继续构建您的设计。

来源

2010-05-30 21:06:56 RobertPitt

感谢您的相关信息，但我也有同样的问题:(

我还简化了这点：

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

来源

2010-05-31 06:00:32 Patrick

这不是一个有效的文档类型，请尝试像<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd“> – 2010-05-31 19:12:51

什么是你想与框的背景呢？它看起来非常复杂，仅仅有一个白色的背景，如果这是它是什么，在这种情况下，你的页面可以简化为这样：

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

来源

2010-05-31 19:14:57

感谢您的信息。但问题也正在于此：火狐不对齐的输入项： WebKit的（Safari /铬）http://img534.imageshack.us/img534/7320/safariw.png 在Firefox上的http： //img706.imageshack.us/img706/1109/firefoxo。PNG – patrick 2010-06-01 21:00:42

你有没有尝试设置自己的身高是相同的？ – 2010-06-01 21:52:14

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

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

来源

2010-06-01 21:13:49 Patrick

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

来源

2010-10-16 22:29:49 Xhezairi

CSS风格火狐/ Safari浏览器/ Chrome

回答

相关问题