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 href="">新闻资讯</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">今日热点</a></li>
</ul>

css样式:

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

在IE6/IE7下垂直显示

解决方法:

ul li {
display: inline-block;
margin:10px;
list-style: none;
_display:inline;
}

2:IE6下浮动时margin双倍边距

比如有一个div,其css为float:left,然后margin-left:20px,

在主流浏览器中显示为,但在IE6中则会出现双倍边距,即为40px

解决方法:在对应的样式中加  "_display: inline;"

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

 设置min-height和min-width IE浏览器忽略了min-height和min-width

解决方法:

.test{
   min-height:100px;
  height: auto !important;
  height: 100px;
 }  同理min-width也可以用这种方法实现

4. 无法设置微型高度

在IE中使用 height: XXpx 这样的属性无法设置比较小的高度。

比如有一个div,将高设为height:2px;

在主流浏览器中显示为

在IE浏览器中显示为

解决方法:在样式中加 overflow: hidden 。

5: 文字大小不兼容

同样14px的宋体字,IE下实际占高16px,下留白3px,firefox下实际占高17px,上留白1px,下留白3px。

文字大小不兼容解决方案: 给所有文字设定通用line-height值

6:图片默认有间距

解决方案:给img设定 display:block。

总结:* 或 # ,IE7、IE11 支持。
  \9 ,IE8、IE9、IE11 支持。
\0 ,IE8、IE9, IE10 支持。
 *、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。
时间: 2024-11-08 23:49:55

IE浏览器下常见兼容性问题总结的相关文章

IE下常见兼容性问题总结

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

一个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

页面在360浏览器下的兼容性问题解决

引言:  在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其它的浏览器上.皆为正常状态,问题出在哪里呢? 问题的提出: Web页面在360的浏览器上,显示不对. 可是在Firefox.chrome和IE8+以上的浏览器上,都是显示正常的. 问题的分析 1.  检查了一些Javascript框架.标准的jquery类库1.x系列,确认其工作正常,问题不是在于Javascript方面. 2.  排查掉HTML标签内容的显示 问题. 3.  怀疑是CSS在不同浏览器下的兼容性问

IE浏览器下常见的CSS兼容问题

[1]IE6-浏览器下子元素能撑开父级设置好的宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } .list{

IE下常见兼容性问题

一.IE6/IE7对 display-inblock支持的欠缺 Html代码: <div class="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">公司介绍</a></li> <li><a href="">联系我们</

解决uploadify插件不同浏览器下的兼容性问题

http://www.thinkphp.cn/code/2138.html uploadify在部分浏览器上没法使用,或者各种报错的解决方法.uploadify插件上传图片是很爽的体验. 如果用chrome浏览器使用该插件基本上不会出任何错误. 报错情况: 1.缺少flash插件. 这种情况比较好解决,直接下载一个flash for firefox插件安装上就可以解决了,或者在安装一个flash for ie插件. 2.直接HTTP 302错误. 这种情况说明页面做了session验证,做了重定

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

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

浏览器常见兼容性问题汇总

1.随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大,解决方案是:*{margin:0;padding:0;} 2.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大,常出现的问题是IE6中后面的一块被顶到下一行,解决方案是:在float的标签样式控制中加入 display:inline;将其转化为行内属性 3.设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度,这是因为这些浏览器下有默认行高

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

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