CSS float and document flow difference between firefox and ie7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>css float and document flow difference between firefox and ie7</title>
<style type="text/css">
.paragraphs {border: 1px solid #ccc; width: 300px; float: left; margin: 10px;}
.divs {border: 3px double #333; width: 600px; margin: 2px;}
</style>
</head>
<body>
text content before float elements, blah, blah.......<br />
text content before float elements, blah, blah.......
<p class="paragraphs">
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
</p>
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
<div class="divs">
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
<br />
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>css float and document flow difference between firefox and ie7</title>
<style type="text/css">
.paragraphs {border: 1px solid #ccc; width: 300px; float: left; margin: 10px;}
.divs {border: 3px double #333; width: 600px; margin: 2px;}
</style>
</head>
<body>
text content before float elements, blah, blah.......<br />
text content before float elements, blah, blah.......
<p class="paragraphs">
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
</p>
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
<div class="divs">
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
<br />
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
</div>
</body>
</html>
No comments :
Post a Comment