css - 在 FireFox 3.0.15/IE 6.0 和 7.0 上以类似的方式进行 CSS 渲染

Question

以下css渲染不同取决于浏览器(主要是Firefox) Firefox:border-left-style:dashed 似乎没有按预期生效，而是显示黑线。

我已经捕获了屏幕截图

FF--> http://pixpin.com/images/81898090171964887806.jpg

IE6--> http://pixpin.com/images/32538710129638992535.jpg

此外，字体似乎是使用 em 的另一个问题，因为它们在跨浏览器中的响应相对更好。当我使用像素时，它很困惑，但不确定它们是否更好。

我不是 CSS 专家，使用 CSS 让我感觉比与二手车经销商打交道更糟糕。

.Main {
  font-family: Arial, "Trebuchet MS", Sans-Serif;
  font-size: 0.8em;  
  border:0px;
}

.Header {
    font-family: Arial, "Trebuchet MS", Sans-Serif;
    font-size: 1.2em;
    color:#666;
    background : url("../images/header.jpg") repeat-x top left; 
    padding-left: 10px;   
    padding:4px;
    text-transform:uppercase;
    border:1px;
    border-collapse:collapse;
    border-bottom-width:thin;
    border-left-style:dashed; 
}

.Footer {
    color:#666;
    font-family: Arial, "Trebuchet MS", Sans-Serif;
    font-size: 0.7em;
}

.Footer td {
    border-style:none;
    text-align:center;
}

.Footer span {
    color:#666;
    font-family: Arial, "Trebuchet MS", Sans-Serif;
    font-size: 0.7em;
    font-weight:bold;
    text-decoration:underline;
    border-style:none;
}

.Footer a {
    font-family: Arial, "Trebuchet MS", Sans-Serif;
    font-size: 0.7em;
    color:#666; 
}

.Results-Item td {
    margin-left: 10px;
    vertical-align:middle;
    color:#666;
    background-color: white;
    font-size: 1.2em;
    padding:4px;
    font-family: Arial, "Trebuchet MS", Sans-Serif;
    padding-left: 10px;   
    line-height: 20px;
    border:1px; 
    border-collapse:collapse;
    border-bottom-width:thin;
    border-left-style:dashed; 
}
 
.Results-AltItem td {
    margin-left: 10px;
    vertical-align:middle;
    color:#666;
    font-size: 1.2em;
    /* _font-size: 1.2em; /* IE6 hack */
    padding:4px;
    font-family: Arial, "Trebuchet MS", Sans-Serif;
    background-color: #ccc;
    padding-left: 10px;   
    line-height: 20px;
    border:1px; 
    border:1px; 
    border-collapse:collapse;
    border-bottom-width:thin;
    border-left-style:dashed; 
}

#Amount {
   text-align:right;
}

Answer 1

避免这些错误的最佳方法是使用 CSS 标准化(重置)基础，例如 blueprint 提供的基础。 .

如果您不包含蓝图上的所有内容，至少包含其reset.css 文件。它将消除导航器之间的字体和间距不一致的行为(我不确定边框问题)

编辑:这是安装基本蓝图所需的全部内容:

<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->