Taken http://hi.baidu.com/wicker_wind/item/31a1f1da08302cfaca0c394b
These are the questions I usually gather before work summary, if you readers have a correction or addition, please Replies supplement
1. Use img ul ul img when aligned bottom portion IE6 gap at
Solution: .downloadCon ul, .downloadCon .downLinImg {width: 100%; float: left;}
.downloadCon ul,.downloadCon .downLinImg{ clear:both; display:block;}
downLinImg as Picture Styles
Remove the container and the space between the image and the image to add the attribute align = "absmiddle"
2 using img <ul> <li> img </ li> </ ul> with a gap at the bottom was arranged
Solution: add height to li
PS: the good use of style initialization
Before a void 3. LI: font-size: 0; / * * blank under IE6 LI /
4. 3象素BUG：vertical-align:middle;/*for ie6 3x bug*/
5. For the next IE6 PNG transparent background image to repeat:
_background-image: none
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="images/indexMainKbac.png",sizingMethod="crop");
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bodyMainLine.png", sizingMethod="scale");
sizingMethod = "crop": Cut the image to fit the border
sizingMethod = "scale" stretch the image to fit the border
. 6 </ ul> <IMG the src = "Images / nl_newsTypeBottome.gif" width = "198" height = ". 8" /> </ div> ul lower structure there is a gap at the photo IE6 :
div ul,div img{clear:both; display:block;}
After 7 DIV set up floating in IE6 link failures
The provision of the floating DIV PNG transparent filter disposed in the outside of this set and DIV DIV plus a float, then all the tags A are set position: relative; to
8 DIV absolute positioning does not match with the position in IE FF
margin:0
9 is set to the bottom of the float in IE6 FLASH the still located over the floating layer:
FLASH codes floating layer placed on top of the floating layer can be
10 IE6 lower layer is provided when the floating, z-index is large but in the following cases:
1, the parent layer or the body itself as far as possible relative to the parent DIV peer
2, the parent set of z-index attribute DIV
* Try not to tag nested block within the line label, keep the code semantic specification
Height in the tag 11 li style elements included in a block-level brings.
To the <li> to add vertical-align: bottom; style solve
12 is 3 pixels under IE6 shuffling
to occur DIV added ZOMM BUG: 1; box model to use, in addition the following CLEAR DIV DIV style appear BUG (possibly floating IE6 reasons not closed)
13 css how to display the client does not have the font:
@ font-face {font-Family: name; the src: URL (URL); sRules}
@ font-face {font-Family: name; the src: URL (URL); sRules}
lI appears in the bottom 14 dIV tag 4PX
method 1 #list div setting clear: left | both, then #list li can not set the width, height, zoom. Method 2
#list li disposed float: left, this time may be provided #list li width, height, zoom.
#list li Setting clear: left | both, then #list li can not set the width, height, zoom.
Method 3
IE6 / IE7 this Bug can be set by the vertical-align div to li in: top | middle | bottom solved. Too weird, just add the value of vertical-align is one of the three can be.
Div 15 for nested within div margin-top to the parent role the DIV
<body style = "margin: 0; height: 0;">
<div ID = "D0" style = "background-Color: # 333333; height: 500px; ">
<br style="line-height:0;"/>
// this line br not added, the FIREFOX id1 in the margin-top: 20px will acts on d0, d0 so that the top of the upper body with a spacing between the 20px, d1 and d0 is no space, and the normal display IE
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div>
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div>
</div>
</body>
16 FF does not support the table positon: relative properties
17 高度不能自适应
在外面加<div class=” grid”></div>
.grid:after{clear:both;
content:" ";
display:block;
height:0;}
18 margin 上面外边距折叠：设置父标签FLAOT属性
19 关于IE6下margin负值对象被隐藏的问题：结对象加position:relative
20 关于IE8FF下DIV嵌套出现外层自适应高度问题<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
1） 给外层DIV加样式：display=table
2） 定义一个CSS类：
.box:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
然后将父层DIV代码中的<div id="main">改为<div id="main" class="box">。
3） 给外层div加个overflow:auto;
21 li设置float属性后ul的高度不能自适应li设置float属性后ul的高度不能自适应
1） 在ul 的样式里写上float:left，让ul 也飘浮；
2） 在ul的样式里写上width:100%; overflow:hidden; 这样也好用；
转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/29/2661533.html