Home >Web Front-end >HTML Tutorial >A compatibility issue with IE browser, please help_html/css_WEB-ITnose
A compatibility issue with IE browser, please help_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:15:111012browse
I encountered a CSS compatibility problem. I found that it was compatible with the middle part of IE, but there was a misalignment. It was basically normal in other non-IE core browsers. What is this situation? If you enable the high-speed mode in the IE browser, there will be no problem. However, if you use the compatibility mode, misalignment will occur. I hope you guys can give me some advice. Thank you!
The misaligned picture is as follows:
My code is as follows:
.artice{width:298px;height:283px;border:1px solid #DBDBDB;float:right;margin-top:-290px;}.box{width:100%;height:20px;line-height:20px;background-color:#EBEBEB;border-bottom:1px solid #DADADA;} .wenzhang{width:100%;overflow:hidden;zoom:1;height:100%;}.wenzhang ul{float:left;}.ico3 li{padding-left:16px;background:url(../images/ico-3.gif) 7px 11px no-repeat;}.d1{padding:4px 0px;}.d1 li{height:23px;line-height:23px;overflow:hidden;width:100%;} Reply to discussion (solution)
Use position to fix the position
What is IE?
The code is also posted
What is the IE?
IE 9
The code is as follows:
<div class="artice"><div class="box"><h2>最新文章</h2></div><div class="wenzhang"><ul class="d1 ico3"> {dede:arclist row='11'} <li><a href="[field:arcurl/]" title="[field:fulltitle/]" target="_blank">[field:fulltitle/]</a></li> {/dede:arclist} </ul></div></div>
.wenzhang ul{*margin:0;}.box h2{margin:0; height:20px; line-height:20px; font-size:12px;} Add it and try it out
CSS code
.wenzhang ul{*margin:0;}
.box h2{margin:0; height:20px; line-height:20px; font-size:12px;}
Add it and give it a try
I tried it, but it didn’t work~~ But I still want to thank you for your reply~~
Quote from 6th floor’s reply:
CSS code
.wenzhang ul{*margin:0;}
.box h2{margin:0; height:20px; line-height:20px; font-size:12px;}
Add it and give it a try
Tried it, but it didn’t work~~But thank you for your reply~~
Try another plan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif; list-style:none; margin:0px; padding:0px;}.artice{width:298px;height:283px;border:1px solid #DBDBDB;}.box{width:100%;height:20px;line-height:20px;background-color:#EBEBEB;border-bottom:1px solid #DADADA;} .wenzhang{width:100%;overflow:hidden;zoom:1;height:100%;}.wenzhang ul{float:left;}.ico3 li{padding-left:16px;background:url(../images/ico-3.gif) 7px 11px no-repeat;}.d1{padding:4px 0px;}.d1 li{height:23px;line-height:23px;overflow:hidden;width:100%;}</style></head><body><div class="artice"> <div class="box"> <h2>最新文章</h2> </div> <div class="wenzhang"> <ul class="d1 ico3"> <li><a href="#" title="" target="_blank">测试测试测试</a></li> <li><a href="#" title="" target="_blank">测试测试测试</a></li> <li><a href="#" title="" target="_blank">测试测试测试</a></li> <li><a href="#" title="" target="_blank">测试测试测试</a></li> </ul> </div></div></body></html> The main reason is that IE and FF use different CSS box models. The author can search for "CSS box model" and look at the instructions.