Heim >Web-Frontend >HTML-Tutorial >一个IE浏览器的兼容问题,望大侠们帮助_html/css_WEB-ITnose

一个IE浏览器的兼容问题,望大侠们帮助_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:15:111009Durchsuche

自己遇到一个CSS兼容问题,发现在IE中部兼容,出现了错位,在其他非IE内核浏览器中基本都正常,这个是什么情况?在IE浏览器中如果启用高速模式,同样也没有问题,使用兼容模式就出现了错位的情况,望各位大侠给予指点,在此谢过!

错位图片如下图:



我的代码如下:

.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%;}


回复讨论(解决方案)

用position固定一下位置吧

IE几?

 代码也贴下

IE几?
IE 9

代码如下:

<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;}


加上去试看看

CSS code

.wenzhang ul{*margin:0;}
.box h2{margin:0; height:20px; line-height:20px; font-size:12px;}



加上去试看看

试过了,没有效果~~但是还是要谢谢你的回复~~

引用 6 楼  的回复:

CSS code

.wenzhang ul{*margin:0;}
.box h2{margin:0; height:20px; line-height:20px; font-size:12px;}



加上去试看看


试过了,没有效果~~但是还是要谢谢你的回复~~

换个方案

<!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>

主要就是IE和FF它们使用的CSS盒模型不同。楼主自己搜一下“CSS盒模型”看看说明就知道了。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn