A recently completed project needs to be supported by Chrome, and in the process, I've found a chrome that distinguishes between CSS parsing and FF, ie, and so on.
The requirement of the project is to display a prompt box in the center of the screen, which is very mature for both FF and IE, and can be easily realized by using the negative margin:
First look at the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chrome Position</title>
<body>
<div id='wrapper'>
<div id='contentbox'>
<p>Here is the centered content!</p>
</div>
</div>
</body>
Add CSS
<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>
In this way, in FF3, IE6/7 can be very good to achieve horizontal and vertical center, and in Chrome, there are problems.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
