首页 文章

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

提问于
浏览 次
2

以下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;
边框：0像素; } .Header {font-family：Arial，"Trebuchet MS"，Sans-Serif; font-size：1.2em;颜色：＃666; background：url（"../images/header.jpg"）repeat-x左上角; padding-left：10px;
填充：4像素;文本转换：大写;边界：1px的;边界崩溃：崩溃;边界底部宽度：薄;左边框样式：虚线;

} .Footer {color：＃666; font-family：Arial，“Trebuchet MS”，Sans-Serif; font-size：0.7em; } .Footer td {border-style：none;文本对齐：中心; }

.Footer span {颜色：＃666; font-family：Arial，“Trebuchet MS”，Sans-Serif; font-size：0.7em;字体重量：粗体;文字装饰：下划线;边框样式：无; }

.Ferer a {font-family：Arial，“Trebuchet MS”，Sans-Serif; font-size：0.7em;颜色：＃666;

}

.Results-Item td {margin-left：10px;垂直对齐：中部;颜色：＃666;背景颜色：白色; font-size：1.2em;填充：4像素; font-family：Arial，"Trebuchet MS"，Sans-Serif; padding-left：10px;
行高：20px;边界：1px的;边界崩溃：崩溃;边界底部宽度：薄;左边框样式：虚线; }

.Results-AltItem td {margin-left：10px;垂直对齐：中部;颜色：＃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;
行高：20px;边界：1px的;边界：1px的;边界崩溃：崩溃;边界底部宽度：薄;左边框样式：虚线;

}

金额

{text-align：right; }

css firefox internet-explorer

3 回答

  • 1

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

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

    EDIT: 这就是安装蓝图基本所需的全部内容：

    <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]-->
    回复于
  • 0

    仅显示CSS只显示一半的图片，没有html，任何说法都是疯狂猜测 . 在任何情况下，Firefox都会显示你在IE编写过程中所写的内容 . 永远不要相信IE做任何正确的事 . 始终，始终使用现代浏览器（除了IE之外的任何东西）来初步测试您的标记 . 但IE中众多的漏洞和怪癖都是众所周知的，修复它的黑客也是如此 .

    链接到违规页面值得猜测一千个问题 .

    回复于
  • 2

    您可以使用像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 .

    Important: border-left-style: dashed; 对Firefox有效，请检查您的级联是否有冲突的边框左边属性，将它放在CSS中的 border-collapse:collapse 之后，还要将 ; 添加到该规则的末尾 . 对于CSS选择器中的最后一条规则，您不需要它，但是当您切换它时，请确保添加它 .

    希望有所帮助 .

    回复于

相关问题