1、ie兼容css3 border-radius、box-shadow、text-shadow的方法

2、ie兼容性问题及解决方法

3、css Hack

一、ie兼容border-radius、box-shadow、text-shadow

1、下载ie-css3.htc

2、css

box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

二、问题

  1、只能同时4角圆角,不能单独设置;

  2、div上可以正常使用,测试text文本框,会出现异常;

  3、CSS文件要和页面在同一目录下,否则无效

  4、当前元素一定要有定位属性,像是position:relative或是position:absolute属性。

  5、z-index值一定要比周围元素的要高,否则……只能说抱歉了~~

三、支持的样式及说明

参见表:

        样式                          生效                                         无效
border-radius 为元素四个角设置圆角属性元素边框 只设置一个圆角
box-shadow 模糊大小参数   偏移值 不支持除了黑色(#fff)以外的其它颜色
text-shadow 模糊大小参数   偏移值   颜色值 IE下的表现与Firefox/Safari/Chrome有一点点的差异

二 、ie兼容性问题及解决方法

1、在IE6下,块元素有浮动和横向margin值,横向的margin会变成两倍。和margin方向有关系。

     解决办法:将块元素转成内嵌元素。display:inline; 
     2、IE6的子元素可以撑开父元素:
     解决办法:进行精确的计算父子级关系。当然可以通过overflow:hidden将超出的子元素隐藏掉。
     3、若元素浮动,则一行全浮动。否则会出现边距问题(主要是IE6)甚至奇葩问题,其他浏览器好像也有
     4、如果给input加背景,那么在输入内容超过输入框长度时,背景会移动:
     解决办法:把input放在div里面,让input的背景透明,并且把背景头给div。
     5、IE6、7下几px的间隙问题:

     li本身没有浮动,但是内容的浮动让li多出来几px的间隙。
     解决办法:
     1、给li加浮动,
     2、给li加vertical-align:top/middle/bottom  也可以用来清除图片下的间隙
     图片也可以display:block;解决,但是多图片同行就不行了
     6、IE6最小高度问题:

     元素高度小于19px的会被当做19px处理。
     解决办法:
     1、加font-size:0;解决办法有局限
     2、overflow:hidden;

7、IE6下父级元素包不住子级的相对定位

     解决办法:给父级元素定位
     8、IE6下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1px的偏差。

     没法解决。
     9、在IE6下,解决margin传递,触发haslayout,zoom:1;

     其他浏览器可以用overflow:hidden;
     这其实不算IE的bug,浏览器都有这个问题,也可以通过添加上下padding或者border来解决。
     10、IE6下,父元素有边框的时候,子元素的margin消失了:
     解决办法同上。
     11、IE6:当一行子元素宽度之和与父级相差大于3像素或者有不满行状态的时候,最后一行的margin-bottom就会消失。

     目前没办法解决。
     12、IE6:当li间隙问题和IE6最小间隙同时存在时(li本身没浮动,但是其中内容有浮动导致其下面有间隙:给li加vertical-align属性)

     解决办法:overflow:hidden,float:xx;
     13、IE6文字溢出bug:

     子元素宽度和父元素宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素。
     解决办法:把内嵌去掉或者调整父级大小。
     14、IE6 当绝对定位和浮动元素并列的时候,绝对定位元素会消失。

     解决办法:自然是去掉并列关系。给定位包个div
     15、IE6下,当thead、tbody、tfoot和下面的tr同时加样式,tr的样式会代替父元素的样式。

     没有解决办法。
     16、IE6、7下输入类型的表单控件,默认上下有1px的边距。

     解决办法:让控件脱离文档流。
     17、输入类型表单控件border:none;无效
     解决办法:border:0,或者给input重置背景。
三 、css Hack
    hack是一种解决兼容性很好的办法,但是现在开发不怎么赞成使用,注意尽量少使用吧!
    1、条件注释法(一般使用在IE6-IE9):

   只在IE下生效:

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
   只在IE6下生效:

<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
   只在IE8以下生效:

<!--[if lt IE 8]
这段文字只在IE8浏览器以下显示
<![endif]-->
   只在IE6以上版本生效:

<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
   只在IE8上不生效:

<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
   非IE浏览器生效:

<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

2、属性前缀法:

标准模式下:

#selector{
  -color: red;    /* 减号和下划线是IE6专有的hack */
  color:blue\9;   /* \9 IE6-IE10都生效 */
  color: pink\0;    /* \0 IE8-IE11生效 */
  color: green\9\0;  /* \9\0 IE9和IE10生效 */
  *color: yellow;   /* [.*+<>] IE6-IE7生效 */
}

3、选择器前缀法:

*+html selector{color:blue;}    /* *+html前缀只支持IE7 */

IE兼容性的更多相关文章

  1. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  2. SQL Server2008R2 在windows8上安装,出现“兼容性”和 “执行未经授权的操作”的错误!

    本人是windows8.1的操作系统,亲测安装成功 解决方法如下: 1.卸载干净sql Server2008r2,包括注册表内容,删除c盘下的安装路径! 2.关闭防火墙(这步很重要) 3.断开网络连接 ...

  3. [转载]强制不使用“兼容性视图”的HTML代码

    在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...

  4. 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  5. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  6. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  7. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  8. Atitit Atitit.软件兼容性原理----------API兼容 Qa7

    Atitit Atitit.软件兼容性原理----------API兼容 Qa7 1. 兼容性的重要性与反面教材1 2. 提升兼容性的原则2 2.1. What 与how 分离2 2.2. 老人老办法 ...

  9. Atitit.兼具兼容性和扩展性的配置方案attilax总结

    Atitit.兼具兼容性和扩展性的配置方案attilax总结 文件配置法1 Jdbc多数据源文件配置发1 Bat文件配置法1 改进的文件配置法(采用类似i18n技术) 推荐1 使用自动化pc_id的方 ...

  10. Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结

    Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结 1. 什么是可扩展的应用程序?1 2. 松耦合(ioc)2 3. 接口的思考 2 4. 单一用途&模块化,小粒度化2 ...

随机推荐

  1. js日期加减

    先补充下基础知识: var myDate = new Date(); //myDate默认返回当前时间 myDate.getYear(); //获取当前年份(2位) myDate.getFullYea ...

  2. C++ 生成 dll 和调用 dll 的方法实例(转)

    1)生成dll 建立两个文件 xxx.h , xxx.cpp xxx.h内容如下: #ifdef BUILD_XXX_DLL#define EXPORT __declspec(dllexport)#e ...

  3. fis总结

    1.fis捕获组 $1.$2.$3……是正则表达式替换中对捕获组的引用 $0或$&是对整个匹配字符串的引用 2.fis命令 fis3 release -d ../output prod -wL ...

  4. Struts2 action的单例与多例

    struts 2的Action是多实例的并非单例,也就是每次请求产生一个Action的对象.原因是:struts 2的Action中包含数据,例如你在页面填写的数据就会包含在Action的成员变量里面 ...

  5. 如何快速有效的修改java的环境变量

    之前已经修改过jdk的环境变量,,,,在/etc/profile下,,, export JAVA_HOME=/usr/java/jdk1.7.0_67-cloudera export PATH=${J ...

  6. java String 中 intern方法的概念

    1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ne ...

  7. php 短路逻辑运算符

    短路与 && 短路或 || or.||.and.&& 都是短路运算符 &&(and)短路与运算符检查第一个表达式是否返回“flase”,如果是“fals ...

  8. LYDSY模拟赛day3 平均数

    [ 问题描述]有一天, 小 A 得到了一个长度为 n 的序列.他把这个序列的所有连续子序列都列了出来, 并对每一个子序列都求了其平均值, 然后他把这些平均值写在纸上, 并对它们进行排序,最后他报出了第 ...

  9. ThinkPHP魔术方法

    我们在使用thinkphp开发系统的时候,有时候会用到getById('1')这个方法快速的获取一条信息的内容,比用where(" id =1 ")->find();好用多了 ...

  10. ThinkPHP报错处理

    1,当运行结果提示:找不到该页面(控制器),怎么办? 建造一个空页面:EmptyController <?php namespace Home\Controller; use Think\Con ...