解决IE6的浮动元素的双倍边距问题
对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：
div {float:left;margin:40px;display:inline;}
Reference:http://www.javaeye.com/news/3176
Showing posts with label Float. Show all posts
Showing posts with label Float. Show all posts
Tuesday, August 12, 2008
div {float:left;margin:40px;display:inline;}
Reference:http://www.javaeye.com/news/3176
Saturday, March 01, 2008
关于CSS中的position和float的二点说明
1、当float的元素的margin为负值时，其周边元素内容可能会覆盖到float元素上面。当float元素宽度大于容器宽度并margin为负值时，会使得float元素在容器二边都超出。
2、position: absolute的元素的一系列上级元素如果具有position:absolute/relative/fixed属性时，会根据其上级元素进行绝对定位。如果其上级元素没有position属性，则根据整个html文档定位。
Tuesday, February 26, 2008
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>
Subscribe to:
Posts
(
Atom
)
