在今天所有主流浏览器中正确显示网页是一项非常耗时的任务.
是否有一种简单的方法可以使CSS样式在每个浏览器中看起来都相同？或者至少你有一些提示,使这项工作更容易？
我同意所有"重置"建议和"网格"框架建议,但我确实想添加一些建议:实际上,每个浏览器中相同的目标是无法实现的,因为您无法控制客户端.例证:字体.
你在CSS中声明你的字体样式,但是一些Linux机器,一些Mac,一些移动浏览器 - 将不具有你指定的字体.这种变化导致不同的文本长度和包装.然后是每个运行浏览器版本和操作系统的差异; 不同浏览器如何实现缩放功能; 并且文本大小可以由最终用户调整.相同的渲染只是一个无法实现的目标.
但请记住!这是CSS的"艺术"部分:能够灵活设计,以便优雅地处理浏览器,操作系统和最终用户调整之间的差异.不要争取相同的渲染 - 你应该争取品牌一致性+适当的经验+灵活性.
尝试使用css重置,如eric meyer reset或YUI reset.将帮助但没有简单或完美的方式使每个浏览器看起来相同
以下列方式组织您的工作流程,这将减少浪费的大量时间.
确保声明doc-type.
使用其他人在此处提到的重置方法之一.
处理你的结构
避免在相同的元素上使用宽度和填充.
总是想到减少不需要的HTML和CSS而不是一直添加.
浮动元素时尽量不要左右使用边距.
如果坚持使用这些项目,很多最常见的问题都不会出现.
PS我忘了提到的一个项目是在W3上使用验证器.
我总是创建一个基本的CSS样式表,它在W3C完全兼容的浏览器中工作,如firefox,然后创建其他浏览器特定样式表来修复其他浏览器中的任何样式问题,即IE6,IE7等.
您可以在HTML中使用以下代码来选择适当的IE样式表.
您还可以使用在线网站(如browsershots)在不同的浏览器中查看您的网站.
一开始很费时间,特别是如果你还在学习DIV + CSS的绳索.但是,在你完成足够的练习并遇到足够的问题并让它们全部解决之后,你就会知道什么是工作,什么不工作.
那么你就知道如何在一开始就编写最兼容的风格,这样可以节省所有时间,并且几乎没有任何主流现代浏览器出现任何问题:IE6,IE7,FF2,FF3,Opera 9,Safari 3 Win/Mac.
是的,这是可能的,并且尽可能容易.一个接一个地练习并征服它们,然后你知道如何在第一次尝试中做正确的事情.
那么唯一令人困惑的怪物应该是IE6我猜.它是浏览器.除此之外,ff2,ff3,opera 9,safari win/mac,ie7,ie8在渲染引擎中相对类似,至少比IE6的bug少得多.
我有一些最佳实践(一个刚刚开始他们的CSS之旅)编码以获得最大的CSS兼容性:
首先使用重置.它清除了你的思想,确保你工作的每一步.
不要在同一个元素上使用填充(左和右)和宽度,除非你知道它将如何运作.
如果元素是浮动的,则给它的父级溢出:hidden和height:如果父级还没有高度,则为1%.
不要给元素提供margin-top或margin-bottom但只提供margin-top或margin-bottom.因为相邻元素的边缘相互坍塌,使得新手的定位有些不可预测.
如果元素浮动,请将其显示为:inline.
除非你的脚本需要它,否则不要依赖z-index.
如果在IE6中发生任何奇怪的事情,请在该元素上使用height:1%.
根据我的经验,这些东西真的可以帮助你解决潜在的问题.使用它们可以消除80%的任何时间消耗问题的机会.实际上,在处理特定标签时,有一些比这些更简单的提示,但让我们称它为一天.
京公网安备 11010802040832号 | 京ICP备19059560号-6 