Home >Web Front-end >HTML Tutorial >3px solution under IE6 browser_html/css_WEB-ITnose
3px solution under IE6 browser_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:371214browse
Solution to 3px under IE6 browser:
The 3px problem under IE6 is mainly caused by irregular writing. For example, if we want to write a structure with two columns on the left and right, the code is as follows :
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent { width:300px; height:300px; background-color:red;}.left { float:left; width:100px; height:100px; background-color:green;}.right { width:100px; height:100px; background-color:blue}</style></head><body><div class="parent"> <div class="left"></div> <div class="right"></div></div></body></html> In the above code, the div on the left is floating, and the second div is non-floating. This will cause a 3px problem under IE6. In fact, this problem itself is caused by non-standard code writing. In standard browsers, because the first div will be separated from the document flow after floating, then the subsequent divs will fill the position of this div, and the display effect of the web page will be the first. One div will cover the second div, which is not a standard way of writing. The solution is to make the second div float as well. Modify the code as follows:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent { width:300px; height:300px; background-color:red;}.left { float:left; width:100px; height:100px; background-color:green;}.right { float:left; width:100px; height:100px; background-color:blue}</style></head><body><div class="parent"> <div class="left"></div> <div class="right"></div></div></body></html> The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/497.html