CHROME对CSS的解析

最近完成的一个项目需要做对Chrome的支持,在这个过程中发现了一个Chrome对于Css解析与FF、IE等的区别,在这里总结一下。

项目的需求是需要在屏幕的中央显示一个提示框,这个对于FF和IE都已经很成熟了,利用负边距能够很容易的实现:

首先看一下页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>Chrome Position</title>
</head>
<body>
<divid='wrapper'>
<divid='contentbox'>
<p>Here is the centered content!</p>
</div>
</div>
</body>
</html>

加入css

1
2
3
4
5
6
7
<style type='text/css'>
html{height:100%;}
body{margin:0px;padding:0px;position:relative;height:100%;}
#wrapper{width:100%;height:100%;position:relative;; left:0px;top:0px;}
#contentbox{width:400px;height:400px;border:2px solid green;position:relative;top:50%;left:50%;
margin-left:-200px;margin-top:-200px;}
</style>

这样,在FF3、IE6/7中都能,很好的实现水平和垂直居中,而在chrome中,出现了问题。


最后,发现是chrome对于position的解析和其他浏览器不同,加入css hack for chrome后,一切正常。

1
body:nth-of-type(1) #contentbox { position:absolute;}

cocowool

A FULL STACK DREAMER!