如何避免CSS中的在不同浏览器中产生差异

html-css018

如何避免CSS中的在不同浏览器中产生差异,第1张

那就要通过添加私有前缀或hack来给不同内核的浏览器进行个性化设置了。事实上,如果是标准浏览器(Chrome、FireFox、Safari、IE9+等),一般是不存在差异的,即使有也是很小的(如果使用了尚未成为标准的css3新属性,则可能造成较大的差异,这可以通过前缀来解决,或尽量不使用这些属性)。

真正麻烦的是非标准浏览器(IE5/6/7/8),它对很多css属性的解析都是跟css标准存在差异的,而且它还有很多自己特有的(css标准里没有的)属性。通常的解决办法,是专门给IE浏览器设计css(其他标准浏览器则用另一个css),里面可以尽情利用微软自己的解决方法来达到与标准浏览器一致或差不多的效果。当然,有些差异是不可能完全消除的,遇到这种情况,我的建议就是放弃,众口难调是客观现实,把时间精力浪费在这里会得不偿失。

CSS 表达式可能会影响到网站的性能;

在更多的留意了关于 CSS 表达式方面的知识,而这篇文章,是我在看 《高性能网站建设指南》后,以及之前做的一些学习,我想总结下 “为什么尽量避免使用 CSS 表达式”;

什么是 CSS Expression?

CSS Expression (CSS 表达式),是一种使用动态设置 CSS 属性的方式,并且被 IE5 以上的版本所支持,但是 IE8 的标准模式已不再支持 CSS 表达式了[1];

一个简单的 CSS 表达式

body {

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )

}

这段代码的作用是能让你页面中 body 的背景色每隔一小时变换一次;

CSS Expression 带来的性能问题

是的,参考 MSDN “关于动态属性” 的文档,你会发现,其实 CSS 表达式还是非常强大的,比如你可以使用 CSS 表达式实现 min-width 属性,隔行换色,模拟 :hover, :before, :after 等伪类;

但是,正式因为 CSS 表达式太强大了,以至于 CSS 表达式带来的严重的性能问题:“为了确保有效性,CSS 表达式会进行频繁的求值”,到底有多频繁?就是在你改变窗口大小,滚动页面甚至移动鼠标都会触发表达式进行求值,如此频繁的求值以至于浏览器的性能收到严重的影响;

关于对 CSS Expression 的性能测试

这个测试的方法是来自于最近一段时间在看的《高性能网站建设指南》中的规则7;

P {

width: expression( setCntr(), document.body.clientWidth<600 ? "600px" : "auto" )

min-width: 600px

border: 1px solid

}

这个方法通过绑定一个 setCntr() 函数到 CSS 表达式上,统计页面执行了多少次的 CSS 表达式,并显示在一个文本框里面;你也可以通过 IE5 ~ IE6 访问http://stevesouders.com/hpws/expression-counter.php 进行测试;

测试结果

页面内有 10 个段落,加载完页面大概执行了 40 次的 CSS 表达式,然后在你改变页面大小,滚动页面,甚至移动鼠标,在我的测试里不动鼠标仍然会执行 CSS 表达式,几万次的求值根本不在话下,而且在点击文本框之后,IE 就已经卡死了;

避免使用 CSS Expression

好吧,这是一个总结;虽然还有对 CSS 表达式进行优化的方法(你可以在参考链接中找到),但是这不是这篇文章要总结的,这篇文章要总结的是为什么尽量避免使用 CSS 表达式;

CSS 表达式虽然强大,但是会给浏览器带来很严重的性能问题,并拖慢网页的加载速度;在可能的前提下,尽量避免使用 CSS 表达式!

css避免绝对定位覆盖其他元素,首先,在做定位的时候,确实是会出现覆盖的问题,一般在确定left,top,bottom,right这些数值,一般都是精确的测量过,很少出现覆盖,有问题的,通过JS获取到这个块的left,top,bottom,right,动态的来控制,能避免出现这些问题,具体看代码:

<html>

<head>

<style>

#div1{

width:460px

height:200px

position:absolute

}

</style>

</head>

<script>

var oDiv = document.getElementById('div1')

var Let = Div.style.left //上下的值,

var Rig = Div.style.top

</script>

<body>

<div id='div1'>

<p>我是测试文字</p>

</div>

</body>

</html>