CSS兼容浏览器

电玩女神 2021-09-11 07:50 643阅读 0赞

margin-bottom:40px;       /*ff的属性*/
    margin-bottom:140px\9;    /* IE6/7/8的属性 */
    color:red\0;              /* IE8支持 */
    *margin-bottom:450px;     /*IE6/7的属性*/  +margin-bottom:450px;
    _color:#ff0000;         /* 只ie6支持 */
    
    
    #1 { color: #333; } /* FF环境 */ 
    * html #1 { color: #666; } /* IE6环境 */ 
    *+html #1 { color: #999; } /* IE7环境 */
    
    ================================================================================
    
    三、CSS hack写法
    
        书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。    
    
           color:red;//所有浏览器
    
          color:blue\9;//所有IE
    
          +color:orange;//IE7
    
          _color:green;//IE6
    
        若浏览器为FireFox，那么color:red；若浏览器为IE8，根据CSS优先性原则，color:blue；若为IE7，color:orange；若为IE6，则color:green。
    
        IE6识别 * 、_
    
        IE7识别 * 、+
    
        IE8识别 * 、\9,\0
    
        只有IE8识别  \0/    
    
        ie9只识别：\9
    
        FF什么都不识别
    
     
    
    .test{
            color:#09F\0; /* IE8/9 */
            color:#09F\0/; /* IE8 only */
    }
    :root .test { color:#963\9; } /* IE9 only */
    /*或者下面的，但是下面的优先级小于上面的。Ps:老外的方法都是\0，根本没考虑Opera*/
    @media all and (min-width:0){
        .test{color:red\9; }/* IE9 only */
    }
    
    
    FF: 支持 !important
    IE7:支持*

html判断IE版本

除IE外都可识别

# 一.特殊性 #

## display: inline-block; ##

先让块元素变为内联，再使用（zoom:1 或float属性等）触发块元素layout  
Ie7兼容方法：   
ul li\{ display:inline-block;\*zoom:1;\*display:inline;\}

## 兼容rgba() ##

background: rgba(0, 0, 0,0.8);   
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\#BF000000,endColorstr=\#BF000000)

## opacity ##

filter:alpha(opacity=0);  
    -moz-opacity:0;  
    -khtml-opacity: 0;

## 清除的浮动方式 ##

.clearfix:after,.clearfix:before\{  
content: ""; visibility: hidden; display: block; height: 0; clear: both; \}  
\* html .clearfix\{   zoom:1;  \}  ----兼容ie7/6

## min -width/height ##

IE不认得这个，而它实际上把width当做最小宽度来使。  
\#container\{   
min-width: 600px;   
width:expression(document.body.clientWidth < 600? "600px": "auto" );//通过Javascript的判断来实现最小宽度

## 单选框、复选框与后面的文字对不齐 ##

问题：单选框、复选框与后面的文字对不齐。  
解决：  
.align\{font-size:12px;\}  
.align input\{ display:block; float:left;\}  
.align label\{ display:block; float:left;padding-top:3px; \*padding-top:5px;\}

## 禁用中文输入法的问题 ##

问题：不能在输入框中输入汉字  
解决：  
只在ie系列和ff中有效  
ime-mode:disabled    (但可以粘贴)  
禁用粘贴：  
οnpaste="return false"

# 二.position类 #

## position:fiex---ie6 ##

\#menu \{  
            position: fixed;  
            top: 100px;  
            left: 50%;  
            width: 50px;  
        \}  
/\*兼容position: fiex的方法\*/  
        \* html \#menu \{  
            position: absolute;  
            bottom: auto;  
            top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  
        \}

## z-index ##

Ie7兼容方法：把z-index放在 position: relative;下，才会显示作用

## overflow:hidden不能隐藏问题 ##

直接加入： position:relative;

## position:absolute兼容ie7问题 ##

必须完成的填写top，left或是right。否则会出错。

## IE6 子元素绝对定位的问题 ##

问题：父级元素使用padding后，子元素使用绝对定位，不能精确定位  
解决：在子元素中设置  \_left:-20px; \_top:-1px;

## 解决ie6双倍边距的bug（margin加倍的问题） ##

以内联的方式来解决：设置内联“display:inline”

eg:

ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题

<div id=”imfloat”> </div>  
 \#imfloat\{   
    float:left;   
    margin:5px;/\*IE下理解为10px\*/   
    display:inline;/\*IE下再理解为5px\*/

## IE6 width为奇数，右边多出1px的问题 ##

问题：父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素  
解决：  
将宽度的奇数值改成偶数

## IE6两个层之间3px的问题 ##

问题：左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距  
解决2种：  
1、右边层也采用浮动  float  
2、左边层添加属性 margin-right:-3px;

# #

# 三.img问题 #

## 阻止发生闪烁的(给一个空的图片) ##

\* html, \* html body \{  
            background-image: url(about:blank);  
            background-attachment: fixed;

## img之间存在间隔缝隙?(div中img) ##

造成div高度大于img高度的原因：

![20170224094237425][]

解决4种：

1.img\{ vertical-align:bottom;\}  
2.img\{display:block\}

3.设置图片的浮动属性 float:left;

4.改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden;

## 透明png图片会带背景色 ##

问题：在ie6下透明的png图片会带一个背景色  
解决：  
background-image: url(icon\_home.png);  
background-repeat: no-repeat;  
\_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon\_home.png');  
\_background-image: none;

# 四.table问题 #

## Table问题 ##

Table 中的要外边框 ，要在td设置而不是tr,tr则不显示

## td高度的问题 ##

问题：table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度  
解决：

设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

## td自动换行的问题 ##

问题：Table宽度固定，td自动换行  
解决：  
设置Table的table-layout:fixed，td的word-wrap:break-word

# 五.文本问题 #

## 为什么无法定义1px左右高度的容器 IE6 ##

ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度  
解决：  
overflow:hidden 或 zoom:0.08 或line-height:1px

## 垂直居中的问题 ##

问题：在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中  
解决：

给容器设置一个与其高度相同的行高(line-height:与容器的height一样)

## 在input控件中line-height  ##

Ie7兼容方法： 加上height可以撑大input的高度

## 同样设置的字体在谷歌和火狐里显示的大小不一致 ##

①在谷歌下小于12px的字体都是显示都与12px字体的大小一样  
因为谷歌浏览器设置最小字体是12px,而其他字体设置都是1px,所以需要用到小于12px以下的字体是，可以加入一段CSS：-webkit-text-size-adjust:none;（不过新版的谷歌浏览器已经不能再使用这个了。）  
或是  
\{transform:scale()\}来缩小字体  
注意：  
当使用transform:scale()时; 不仅是文字变小了，整个文字所在的容器也同时会变小。所以应情况而定

②同样的字体设置，火狐字体显示比在谷歌小的多

##    line-height在火狐中会有差异 ##

# 六.ul/li #

## list-style-position默认值的问题 ##

问题：ie下list-style-position默认为inside,  firefox默认为outside  
解决：  
css中指定为outside即可解决兼容性问题

##  list-style-image准确定位的问题 ##

问题： li前设置图片时，图片与其后的文字对齐问题  
解决：  
1、采用背景定位和字符缩进的方法  
background:url() no-repeat left center;text-index:16px;  
2、采用相对定位方法  
li 设置list-style:url();  
li的子元素position:relative;top:-5px;

## ul浮动后，margin变大 ##

问题：ul设置 float后，在ie中margin将变大  
解决：  
设置ul的display:inline，li的list-style-position:outside

##    li浮动后，margin变大 ##

问题：li设置 float后，在ie中margin将变大  
解决：  
设置li的display:inline

[20170224094237425]: /images/20210813/bdf868eab6094eb8be017f9d3daac691.png