Compatibility problem directory
8. IE6 does not support fixed positioning
9. Under IE6, the front elements float, while the back elements do not float, there will be gaps between them.
10. Bilateral Distance under IE6
11. If the parent of IE67 has a border, the child of IE67 has margin, it will not work.
12. Under IE6, the difference between the width of each line element and that of the parent is more than 2px, and the margin-box of the last line will fail (IE7, no matter how different, will fail directly)
13. In addition to text, there are inline-block elements in the elements under IE6. The line height of the elements will be invalid.
14. The Problem of Word Spillover in IE6
15. IE67li Gap Problem
Follow-up compatibility issues handle link addresses
http://blog.csdn.net/baidu_37107022/article/details/71972223
http://blog.csdn.net/baidu_37107022/article/details/71977053
8. IE6 does not support fixed positioning
js can be used to solve the problem
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 3000px;
}
div{
width: 100px;
height: 100px;
background: red;
/*position: fixed;
right: 0;
bottom: 0;*/
position: absolute;
right: 0;
top: 0;
}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
window.onscroll=function(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
var bottomPos=document.documentElement.clientHeight-div1.offsetHeight;
div1.style.top=top+bottomPos+'px';
}
};
</script>
</head>
<body>
<!--
IE6 Fixed positioning is not supported and can be used js To solve
-->
<div id="div1">kaivon</div>
</body>
</html>
9. Under IE6, the front elements float, while the back elements do not float, there will be gaps between them.
Solution
Adding floats to later elements
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
float: left;
}
span{
background: red;
float: left;
}
</style>
</head>
<body>
<!--
IE6 The lower front element floats, the latter element does not float and there will be a gap between them.
//Solution
//Adding floats to later elements
-->
<div>kaivon1</div>
<span>kaivon2</span>
</body>
</html>
10. Bilateral Distance under IE6
Solution
Add display:inline to the element;
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
span,div{
width: 100px;
height: 200px;
background: red;
/*margin-left: 50px;
float: left;*/
margin-right: 50px;
float: right;
display: inline;
}
</style>
</head>
<body>
<!--
IE6 The lower block element has a float and a transverse direction. margin(About)，That's twice the distance.
//Solution
//Add display:inline to the element;
-->
<div></div>
<!--<span></span>-->
</body>
</html>
11. If the parent of IE67 has a border, the child of IE67 has margin, it will not work.
Solution
Trigger parent layout
Layout Layout Layout Layout Layout Layout Link: Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layou http://blog.csdn.net/baidu_37107022/article/details/71640304
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;
zoom: 1;
}
.parent div{
width: 100px;
height: 100px;
margin: 100px;
background: green;
}
</style>
</head>
<body>
<!--
stay IE67 Next, the parent has borders and the child has borders. margin，That sub level. margin It won't work.
Solution
Triggering parent layout
-->
<div class="parent">
<div></div>
</div>
</body>
</html>
12. Under IE6, the difference between the width of each line element and that of the parent is more than 2px, and the margin-box of the last line will fail (IE7, no matter how different, will fail directly)
Solution
Solution with padding
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
width: 480px;
width: 483px;
margin: 50px auto;
border: 10px solid #000;
overflow: hidden;
padding-bottom: 10px;
}
.box div{
width: 100px;
height: 100px;
background: greenyellow;
float: left;
margin: 10px;
margin: 10px 10px 0 10px;
display: inline;
}
</style>
</head>
<body>
<!--
IE6 Next, the width of each row element differs more than 2 from the width of the parent. px，Last line margin-bottom Will fail
IE7 Next, no matter how different the widths are, they will fail directly.
//Solution
//Solution with padding
-->
<div class="box">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
</body>
</html>
13. In addition to text, there are inline-block elements in the elements under IE6. The line height of the elements will be invalid.
Solution:
Wrap them up separately and set the line height separately.
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
line-height: 300px;
border: 1px solid #f00;
}
/*span{
height: 100px;
background: red;
display: inline-block;
line-height: 100px;
}*/
.span1{
line-height: 100px;
display: inline-block;
background: red;
}
.span2{
line-height: 200px;
display: inline-block;
background: green;
}
</style>
</head>
<body>
<!--
//In IE6, in addition to text, there are inline-block type elements in the element, which will invalidate the line height of the element.
//Solution: wrap it up separately and set line height separately
-->
<!--<div>
<span>inlin-block</span>
//This is a paragraph of text.
</div>-->
<div>
<span class="span1">inlin-block</span>
<span class="span2">This is a paragraph of text.</span>
</div>
</body>
</html>
14. The Problem of Word Spillover in IE6
Solution
1. Wrap comments or in-line elements in div s
3. Increase the width of the parent by 3px
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap{
width: 400px;
/*width: 403px;*/
}
.left{
float: left;
}
.right{
float: right;
width: 400px;
}
</style>
</head>
<body>
<!--
Under IE6, there are annotations or empty in-line labels between two floating elements. The width difference between parent and child elements is less than 3px, and the text in the element will be copied.
Solution
1. Wrap comments or in-line elements in div s
3. Increase the width of the parent by 3px
-->
<div class="wrap">
<div class="left"></div>
<! - Here is a comment - >.
<div class="right">Here's an extra text </div>
</div>
</body>
</html>
15. IE67 li Gap Problem
Solution
1. Add vertical-align: middle to li;
2. Floating li
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}
li{
width: 200px;
height: 30px;
border: 1px solid #f00;
/*vertical-align: middle;*/
float: left;
}
li span{
float: left;
}
li a{
float: right;
}
</style>
</head>
<body>
<!--
IE67 Next, li There are elements that float left and right, causing each li The problem of gap below
//Solution
1,to li plus vertical-align: middle;
2,to li Float
-->
<ul>
<li><span>Title</span><a href="#">More</a></li>
<li><span>Title</span><a href="#">More</a></li>
<li><span>Title</span><a href="#">More</a></li>
<li><span>Title</span><a href="#">More</a></li>
</ul>
</body>
</html>