IE下常见兼容性问题

一.IE6/IE7对 display-inblock支持的欠缺

Html代码:

	<div class="nav">
		<ul>
			<li><a href="">首页</a></li>
			<li><a href="">公司介绍</a></li>
			<li><a href="">联系我们</a></li>
		</ul>
	</div>

css代码:

.nav{
	text-align: center;
}

ul li{
	display:inline-block;
    list-style-type:none;
}
ul li a{
	text-decoration:none;
}

在主流浏览器中显示:

IE6/IE7中显示:

解决方法:

ul li{
    display:inline-block;
    list-style-type:none;
    *display: inline;
}

 二.IE6浮动下 margin双倍边距

html代码:

<div class="test"></div>

css代码:

.test{
	background:#ccc;
	width:80px;
	height:80px;
	margin-left:30px;
	float:left;
}

IE6显示双倍边距

主流浏览器显示

解决方法在对应的样式中加display:inline 代码如下:

.test{
	background:#ccc;
	width:80px;
	height:80px;
	margin-left:30px;
	float:left;
	display:inline;
}

 三.IE6/IE7显示垂直滚动条

表现描述:

有时候页面就几个字,根本没有超出显示范围,IE6/IE7还会显示垂直滚动条

解决方法:

.test{
	overflow: auto;
}

四.IE6对margin:0 auto;不会正确的进行解析

html代码:

	<div class="test">
		<div class="test-title"></div>
	</div>

css代码:

.test-title{
    background:#ccc;
	width:80px;
	height:80px;
	margin:0 auto;
}

主流浏览器显示:

IE6显示:

解决方法 在父元素中使用text-align:center,在元件中使用text-align:left:

.test{
	text-align: center;
}
.test-title{
        background:#ccc;
	width:80px;
	height:80px;
	margin:0 auto;
	text-align:left;
}

 五:IE6不支持css min-width与min-height

表现描述:

有时候想让一个div最小高度为100px,但ie6中识别min-height,可不识别

解决方法:

.test{
	min-height:100px;
	height:auto ! important;
	height: 100px;
}

意思是:新的浏览器识别出min-height这个样式,当执行到第二行的时候又有!important,所以第三行不起作用。而在ie6中解析时,它不识别min-height和!important,所以直接就解析第三行height样式,继而间接实现了min-height。同理min-width也可以用这种方法实现

六.png图片透明

表现描述:png的图片在ie6中,透明的部分会显示成灰色

解决方法:

是一个争对png的hack,代码如下

img {
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
 }
时间: 2024-10-12 09:24:38

IE下常见兼容性问题的相关文章

IE下常见兼容性问题总结

概述 本小菜平时主要写后台程序,偶尔也会去写点前端页面,写html.css.js的时候,会同时开着ie6.ie7.ie8.ie9.chrome.firefox等浏览器进行页面测试,和大部分前端开发一样,经常被ie折磨,下面就总结一些常见的浏览器兼容性问题,放一起方便自己总结学习,我知道这类型文章,很多大牛都总结过,且写的特别专业.不过我写的都是自己最近碰到的,本人技术一般,也希望各位多加指点. 一.IE6/IE7对display:inline-block的支持欠缺 1)表现描述 这个应该算是很经

IE浏览器下常见兼容性问题总结

1:IE6/IE7对display:inline-block的不支持 html : <ul> <li><a href="">首页</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> <li><a

ie6下常见的bug 调整页面兼容性

ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调试兼容性,下面小强老师就把一些常见的ie6bug列出来,大家去研究下. 考虑结构的稳定性最常见的问题就是网页元素位置混乱,错位. 1.1.1.DOCTYPE 必须有 必需在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有效的XHTM

html常见兼容性问题

html常见兼容性问题? 1.双边距BUG float引起的  使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active 4.IE z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决' 7.select 在ie6下遮盖 使用ifram

JavaScript在IE和FF下的兼容性问题

久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 复制代码代码如下: 一.函数和方法差异:二.样式访问和设置:三.DOM方法及对象引用:四.事件处理:五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: 复制代码代码如下: var year= new Date().getYea

linux下常见解压缩命令

linux下常见的压缩文件格式有tar.gz.tar.gz.tar.bz2.zip等等.对于不同的压缩文件格式有对应的解压缩命令.下面就对此小结一下: 1.后缀为.tar 用 tar –xvf 解压 2.后缀为.gz 用 gzip -d或者gunzip 解压 3.后缀为.tar.gz和*.tgz 用 tar –xzf 解压 4.后缀为.bz2 用 bzip2 -d或者用bunzip2 解压 5.后缀为.tar.bz2用tar –xjf 解压 6.后缀为.Z 用 uncompress 解压 7.后

Linux下常见服务器模型

Linux下常见服务器模型 到今天在公司呆了8个月,完成从校园人到职场人的转身.出身社会,感触颇多,一切身不由己.在工作中快乐过.焦虑过.失望过,到最后的心凉,这一路下来成长不少.大学毕业设计涉及网络知识,当时学习了一些基础的网络知识,工作不久,转到新的项目组hms做的产品IPTV刚好和网络相关,最近几个月一直在看<linux高性能服务器编程>,在网上也看了不少文章,一直想写篇总结. 基础 图1 c/s架构通信 图1是一个简化的tcp通信过程,左侧为“服务器端”,右侧为“客户端”,tcp协议本

linux下常见的压缩指令

# touch 2022 # gzip 2022        ( 源文件被删除 ) # gzip -d 2022.gz # gzip 2022        ( 不可以用来压缩目录 ) # gunzip 2022.gz # zip services.zip /etc/services # zip -r etc.zip /etc        ( 可以压缩目录 ) # unzip services.zip # bzip2 2022 # bunzip2 2022.bz2 # bzip2 -k 20

一个jquery在不同浏览器下的兼容性问题。

<div id ='pdiv' style='visibility:hidden;'> <div id='cdiv'>子元素</div> </div> 以上HTML. 父div设置了visibility为hidden.当使用jquery获取子div的visibility的值时,在不同版本的IE浏览器得到的值不一样: 在>=IE8时 $("#cdiv").css("visibility")的值为"hidd