Home > Article > Web Front-end > Summary of css compatibility issues and some common problems_html/css_WEB-ITnose
Summary of css compatibility issues and some common problems_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:59:181055browse
At present, the compatibility of mainstream browsers is relatively good. This article mainly focuses on solving the incompatibility problem of IE6 and 7.
1.When there are floats, the calculation must be accurate and do not let the width and height of the content exceed the width and height we set. Under IE6, the content will expand the set height.
Solution: Add overflow:hidden to the corresponding parent; but some parts will be hidden. It is best to accurately calculate the width and height and then set it
eg: (IE will expand)
1 <style> 2 .box{ width:400px;} 3 .left{ width:200px;height:300px;background:red;float:left;} 4 .right{ width:200px;float:right;} 5 .div{width:180px;height:180px;background:blue;padding:15px;} 6 /* 7 计算一定要精确 不要让内容的宽高超出我们设置的宽高 8 在IE6下，内容会撑开设置好的宽高 9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <div class="left"></div> 15 <div class="right"> 16 <div class="div"></div> 17 </div> 18 </div> 19 </body>
2. When there is an element floating under IE6, if the width needs to be supported by the content If it is turned on, floats will be added to the block elements inside. Normal browsers do not need to add floats.
eg:
1 <style> 2 .box{ width:400px;} 3 .left{background:red;float:left;} 4 .right{float:right; background:blue;} 5 h3{margin:0;height:30px; float:left;} 6 /* 7 在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="left"> 14 <h3>左侧</h3> 15 </div> 16 <div class="right"> 17 <h3>右侧</h3> 18 </div> 19 </div> 20 </body>
3. When the height of the element is less than 19px under IE6, it will Treated as 19px
Solution: Add overflow:hidden;
4. Border under IE6: 1px dotted #000;, dotted is not supported and will appear as a dotted line.
Solution: Cut background tiles
5. Margin-top of child elements in all browsers , the margin-bottom value will be passed to the parent;
Solution:
a: Add floats to the parent (or add floats to the child can also be solved margin-top problem, but the left and right margin values will have double values, which is a bilateral data bug problem, which will be discussed below);
b: Add position: relative to the parent; (or position:absolute; but it will break away from the document flow)
c: Add display:inline-block; It is feasible in normal browsers, but under IE and 7, block elements do not support display:inline-block;
d: Add the border attribute to the attachment, for example border:1px solid red; This is feasible in normal browsers, but under IE6 you must add zoom:1;
eg:
1 <style> 2 body{margin:0;} 3 .box{background:blue;border:1px solid #000; zoom:1;} 4 .div{width:200px;height:200px;background:red;margin:100px;} 5 /* 6 在IE6下解决margin传递要触发haslayout 7 8 在IE6下父级有边框的时候，子元素的margin值消失 9 10 解决办法:触发父级的haslayout 11 */ 12 </style> 13 </head> 14 <body> 15 <div class="box"> 16 <div class="div"></div> 17 </div> 18 </body> 6. Under IE6, block elements have floating and horizontal margin values, and the horizontal margin value will be doubled.
Solution: Add display:inline;
1 <style> 2 .box{ float:left;border:10px solid #000;} 3 .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;} 4 /* 5 margin-right 一行右侧第一个元素有双边距 6 7 margin-left 一行左侧第一个元素有双边距 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div>1</div> 14 <div>2</div> 15 <div>3</div> 16 <div>4</div> 17 </div> 18 </body> 7. In IE6, 7, li It does not float itself, but the content of li floats, and there will be a gap under li
Solution: 1. Add float to li
2. Add vertical-align to li :top;
Note: When the minimum height problem under IE6 coexists with the gap problem of li, adding float to li can solve it.
eg:
1 <style> 2 ul{margin:0;padding:0;width:302px;} 3 li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;} 4 a{width:100px;float:left;height:30px;background:Red;} 5 span{width:100px;float:right;height:30px;background:blue;} 6 /* 7 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙 8 解决办法: 9 1.给li加浮动 10 2.给li加vertical-align 11 */ 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <a href="#"></a> 18 <span></span> 19 </li> 20 <li> 21 <a href="#"></a> 22 <span></span> 23 </li> 24 <li> 25 <a href="#"></a> 26 <span></span> 27 </li> 28 </ul> 29 </body> 8.When the sum of the widths occupied by a row of child elements differs from the width of the parent by more than 3px, or when the line is not full, the bottom margin of the last row of child elements will fail under IE6
Solution: Um, I haven’t found it yet
eg:
1 <style> 2 .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;} 3 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;} 4 /* 5 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效 6 */ 7 </style> 8 </head> 9 <body> 10 <div class="box"> 11 <div>1</div> 12 <div>2</div> 13 <div>3</div> 14 <div>4</div> 15 <div>1</div> 16 <div>2</div> 17 <div>3</div> 18 <div>4</div> 19 <div>1</div> 20 <div>2</div> 21 <div>3</div> 22 <!-- <div>4</div> --> 23 </div> 9. text overflow bug under IE6. That is: when the difference between the width of the child element and the width of the parent is less than 3px, or when there are comments or embedded elements between the two floating elements, the text overflows under IE6
Solution: Wrap comments or inline elements with divs.
eg:
1 <style> 2 .box{ width:400px;} 3 .left{float:left;} 4 .right{width:400px;float:right;} 5 </style> 6 </head> 7 <body> 8 <div class="box"> 9 <div class="left"></div> 10 <!-- IE6下的文字溢出BUG --><span></span> 11 <div class="right">↓哈哈哈哈哈哈哈哈哈哈</div> 12 </div> 13 <!-- 14 在IE6下的文字溢出BUG 15 16 子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素 17 18 解决办法:用div把注释或者内嵌元素用div包起来 19 --> 20 </body> 10. When floating elements and absolutely positioned elements are in a parallel relationship, absolutely position the element under IE6 will disappear.
Solution: Wrap the positioned element with a div.
eg:
1 <style> 2 .box{ width:200px;height:200px;border:1px solid #000; position:relative;} 3 span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;} 4 ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;} 5 /* 6 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失 7 解决办法: 8 给定位元素外面包个div 9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <ul></ul> 15 <span></span> 16 </div> 11. In IE6 and 7, if the child element has relative positioning, the parent’s overflow package will not Residential element.
Solution: Add relative positioning position:relative; to the parent as well.
eg:
1 <style> 2 .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /* position:relative; */ } 3 .div{ width:150px;height:300px;background:yellow; position:relative;} 4 /* 5 在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素 6 7 解决办法: 给父级也加相对定位position:relative; 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="div"></div> 14 </div> 15 </body> 12. When the width and height of the parent of an absolutely positioned element are odd numbers under IE6, the right of the element There will be a 1px deviation between the value and the bottom value.
Solution: Try to use even numbers, I haven’t found any other method yet.
13. Under IE6, position: fixed; has no effect.
Solution: Use js to control. . .
14. In IE6 and 7, there is a gap of 1px above and below the input type form control.
Solution: add float to input, or absolute positioning.
15. Add border:none to the input type form control under IE6 and 7; you will find that the border is still there,
Solution: Reset the background of the input, such as input{background:#fff;}; or use border:0; or border:0 none;
16. in IE6 , When entering text in the form control of 7 input types, its background image will move together.
Solution: Add the background to the parent.
17. A more concise way to clear floats in css:
Method 1:
/* Clean up floats */
. clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
Method 2:
Add code to the parent element: overflow:auto ; zoom:1;
18. css forced line break and forced no line break:
/* Prohibit line breaks */ .nowrap{word-break:keep-all;white-space:nowrap;}
/* Forced line break */ .break{word-break:break-all;}
19. Hyperlink style settings:
a:link {color: #FF0000} /* Unvisited links */
a: visited {color: #00FF00} /* Visited link */
a:hover {color: #FF00FF} /* Move the mouse over the link */
a:active {color: #0000FF} /* Selected link */
Default style of formatting tag;
20. css/js online compression: (with YUI Compressor tool )
http://ganquan.info/yui/?hl=zh-CN
21. When a line has a fixed width and is displayed If there is no content, add an ellipsis:
｛white-space:nowrap;
text-overflow:ellipsis; /* for internet explorer */
overflow:hidden;
width:190px;
display:block;
text-overflow:ellipsis｝
text-overflow:ellipsis (an ellipsis representing three dots)
22. Browser Compatibility
margin-bottom:40px; /*Attributes of ff*/
margin-bottom: 140px9; /* Properties of IE6/7/8 */
color:red