在 FireFox 3.0.15/IE 6.0 & 7.0 上以类似的方式进行 CSS 渲染答案

【问题标题】：Making CSS Render in a similar way on FireFox 3.0.15/IE 6.0 & 7.0在 FireFox 3.0.15/IE 6.0 & 7.0 上以类似的方式进行 CSS 渲染
【发布时间】：2011-02-24 01:31:45
【问题描述】：

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

我已经截屏了

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

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

字体似乎是使用 em 的另一个问题，因为它们在跨浏览器中的响应相对更好。当我使用像素时，它一团糟，但不确定 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;
}

【问题讨论】：

你有错误的例子或截图吗？此外，所需效果的屏幕截图通常可以帮助我们更多地帮助您:)
这是全球性问题，浏览器不兼容
问题已更新为屏幕截图的链接。

标签： css firefox internet-explorer

【解决方案1】：

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

如果你没有在蓝图上包含所有内容，至少包含它的 reset.css 文件。它将摆脱导航器之间的字体和间距不一致的行为（我不确定边框问题）

编辑：这就是安装 blueprint basic 所需的全部内容：

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

【讨论】：

实际上，使用有问题的 css，字体在 FF 和 IE 7 上的显示效果完全相同。css 的主要问题是你对它的投资越多，它的要求就越多。我试图保持不变尽可能简单。下次我会尝试使用蓝图，因为我现在需要快速解决问题。
测试蓝图其实挺快的。我已经包含了一个示例代码。只需下载 blueprint，使其在 /css/blueprint 上可用，并在 html 中包含这三行，然后再包含您自己的 css。如果您不喜欢它，请删除文件和行。它可以为您省去很多麻烦。

【解决方案2】：

只显示 CSS 只显示了一半的图片，如果没有 html，任何说的都是一个疯狂的猜测。在任何情况下，Firefox 都会显示您编写的内容，而 IE 会在进行过程中进行编造。永远，永远相信 IE 会做任何正确的事情。始终，始终使用现代浏览器（除了 IE 之外的任何浏览器）来初步测试您的标记。但是 IE 中的大量错误和怪癖是众所周知的，修复它的黑客也是众所周知的。

指向违规页面的链接值得对问题进行一千次猜测。

【讨论】：

FF中的虚线在哪里？
@R.R - 虽然 IE 可能会显示您想要的内容，但这并不意味着您的标记编写正确。同样，没有 html，图片也无济于事。
@Rob，行业范围的框架在运行时生成我们无法控制的标记，您应该寻找提供一些解决方法以使该 css 在 F.F. 上工作的方向。无论如何，谢谢。
@R.R - 那么你使用了错误的框架。如果它在 IE 中有效但在 FF 中无效，那么您的标记是错误的！提供了我的解决方法。永远，永远不要使用 IE 作为工作方式的参考。
您没有提供任何解决方法，只是对 IE 的咆哮无济于事:(

【解决方案3】：

您可以使用Meyers reset 之类的CSS 重置，或者将IE 与Firefox 和其他浏览器分开，使用Conditional Comments。通常 Firefox 是显示内容大部分正确的浏览器，所以当我制作网站时，我会先在 FF 中制作，然后更改 IE CSS 以适应。

将其放入 HTML 页面的<head>：

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="path-to-file/ie.css">
<![endif]-->

并在该样式表中设置一些适用于 IE 的不同 CSS。

重要提示： border-left-style: dashed; 对 Firefox 有效，检查您的级联是否有冲突的左边框属性，将其放在 CSS 中的 border-collapse:collapse 之后，并将 ; 添加到末尾那个规则。 CSS 选择器中的最后一条规则不需要它，但在切换它时，请确保添加它。

希望对您有所帮助。

【讨论】：

是的，会这样做，但在此之前我需要一种在 Firefox 中生成虚线的方法，您能否提及我可以使用/替换“border-left-style:dashed”的哪个属性来生成虚线。
所以我尝试了你在css中提到的更新，但仍然在FF中显示黑线而不是虚线。我已经更新了原始问题帖子中的 css。
我已经截屏了 FF--> pixpin.com/images/81898090171964887806.jpg IE6--> pixpin.com/images/32538710129638992535.jpg