一个IE浏览器的兼容问题，望大侠们帮助_html/css

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:15 PM

自己遇到一个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 id="最新文章">最新文章</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 id="最新文章">最新文章</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盒模型”看看说明就知道了。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，