it-swarm.cn

实现跨浏览器CSS的最佳方法是什么?

实现跨浏览器CSS的最佳方法是什么?

规则:答案的一种方法。

4
stacker

您可以使用 条件注释 来修复Internet Explorer的问题。除此之外,您不应该将Firefox/Chrome/Opera彼此分开,它们都支持这些标准。

缓存不应该进入;你应该为所有浏览器提供相同的代码。

4
DisgruntledGoat

最好,最简单的方法是使用库。像OOCSS,Blueprint或960gs这样的库已经被设计为在主要浏览器中复制它们的显示。大部分时间之后,您所剩下的就是确保您的自定义样式符合跨浏览器标准,并且您的标记不会产生任何问题。

如果可能的话,避免像瘟疫一样的黑客攻击(是的,使用条件)。

2
Kenneth Love

当我读到这样的问题和答案时,我开始认为我可能会疯狂,但我写了相当复杂的网站,使用了相当多的CSS,包括css3和其他技巧,我甚至不必诉诸条件评论。

然而,我会在编码过程中不断检查我的工作,多个浏览器(我主要在Chrome中编码,并在firefox和ie7中测试)。当我看到问题出现时,我只是退后一步,弄清楚为什么渲染方式不同,并且经常选择稍微不同的方法。

话虽如此,我确实对这些不同的黑客和方法有着浓厚的兴趣。我特别喜欢阅读CSS3 PIE和modernizr使用的技术。

处理跨浏览器编码的最佳方法是了解不同浏览器解释代码的不同方式,并以一种他们无法帮助但正确的方式编写代码。

1
Zach Lysobey

使用Web标准进行设计和开发
不断验证您的文档和样式表!
每日跨浏览器/跨平台测试!
至少在您提交拉取请求或提交存储库之前。

无论如何你应该编写符合要求的文档,但这对于编写跨浏览器/跨平台的css至关重要。

注意:验证的真正力量不符合100%的时间;一旦你理解了不需要验证的东西,你就会获得超能力,可以推迟,并且应该立即纠正。
这就是力量:不断的验证加强了规范的规则,你将会精通。不断的跨浏览器/跨平台测试让您热衷于了解您最常与哪些浏览器的用户代理样式表进行斗争。如此符合你的风格,你的问题就更少了。

如果你愿意,你可以使用库和框架,但是你正在抽象出工作流程中的所有伤害和痛苦,你永远不会对你在这里要求的样式有详细的了解。但是,libs/frameworks可以很好地为你授予权力,尽管通常会出现页面膨胀。

reset.css,normalizr.css,甚至*{border:none; margin:0; padding:0) reset都是你的武器库中的武器,用于平衡浏览你的风格的浏览器或它自己的风格之间的竞争场。

是的,我确实推荐了*“hack”,还有其他两个选项。在与用户代理进行战斗时,每个人都有自己的位置。

而且,不利用某些用户代理所具有的缺陷是荒谬的,因为所述缺陷不会以100%的连续性呈现并且需要被解决。在这样做时,缺陷本身为您提供了完美的特征检测钩,甚至可以嗅闻它们,因此可以相应地对待它们!

使用每个黑客,缺陷,功能,非功能,你可以得到你的手弯曲dom并强制浏览器内联。

......如果你必须的话。但如果你正在使用网络标准进行开发,你会发现你不会像过去那样需要它们。

因为你更少依赖它们,当你有机会使用它来解决问题时,请快速使用它!你已经知道问题是什么,而且你也有一个针对这个问题的解决方案而不是其他任何问题。

每个浏览器都有自己的目标方式,最明显的是条件评论。
对ie6-9使用条件注释,并使用条件编译为ie10和ie11呈现样式。
但是再次,如果你是dwws和dvwws,你可以将它们包含在你创建的每个文档中,但是发现样式表是贫瘠的,主持一些样式仅仅针对1-3个像素差异,或者获得背景-colors伸展(或不伸展)100%等.

1
albert

我所做的是使用重置CSS,然后使用条件语句。重置CSS几乎修复了所有问题,并修复了IE中的任何问题。如果其他浏览器之间存在差异,我通常会尝试解决它们,例如增加所有浏览器的宽度或字体大小。

我个人使用YUI重置CSS。

0
Darryl Hein

CSS3 PIE 作为CSS3兼容层看起来很有前途。当然,以前的CSS版本还有其他跨浏览器问题。

关于IE6的相关问题,有很多有用的信息: 我应该打扰支持IE6吗?

0
JasonBirch

使用CSS hacks警告前面这一点。

从纯粹的性能角度来看,如果没有其他原因,缓存将对单个文件更有效,而不是响应来自客户端的单个HTTP请求。除了为每个用户提供相同的文件而不管浏览器, 条件评论阻止下载 在某些情况下。

要在单个文件中定位所有不同的Internet Explorer版本,会出现各种CSS黑客攻击。请记住,这些将导致您的CSS无效(如果您需要验证验证)。

身体{
颜色:红色;/*所有浏览器*/
颜色:绿色\ 9;/* IE8及以下*/
 *颜色:黄色;/* IE7及以下*/
 _color:orange;/* IE6 */
}

当存在条件注释时,条件注释阻塞实际上只是IE8中的一些情况中的问题。根据您对支持Internet Explorer的看法,这可能是也可能不是问题。

我个人使用条件评论。我个人认为CSS hacks非常糟糕,并且任何来自条件评论的性能影响都是真实的或想象的不值得麻烦CSS hacks经常导致。

条件注释相对容易实现,并且有一篇 很棒的文章 关于它们在Quirksmode上的使用。以下仅涉及IE6:

<! -  [if IE 6]> 
 <link rel =“stylesheet”type =“text/css”href =“/ media/css/ie6.css”/> 
 <[ENDIF]! - >

有一种语法允许您将版本等于,小于,大于,小于或等于,大于或等于给定版本号的Internet Explorer定位。上面的例子是一个等于。

0
Bryson