CSS-Hack

• 什么是CSS Hack?

  • 针对IE的不同版本设置不同的CSS属性, 我们就称之为CSS Hack

• CSS Hack可以让我们编写的CSS代码, 只在我们指定的IE版本浏览器下有效

  • \9 作用, 就是让该属性在IE10及以下的浏览器都有效
  • *作用, 就是让该属性在IE7及以下的浏览器都有效
  • _ 作用, 就是让该属性在IE6及以下的浏览器都有效

• 注意点:

  • 在使用CSS Hack的时候, 一定要将CSS Hack的代码写到标准代码的后面

    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*CSS的层叠性, 后面设置的属性会覆盖前面设置的属性*/
            background: green\9;
            *background: blue;
            _background: deepskyblue;
        }
    </style>

inline-block的兼容问题

• 在ie7及以下的浏览器下,display:inline-block无效(由于inline-block是css2.1新推出的)
• 解决方法: 在display:inline-block后面加上* display :inline;和* zoom:1;即可

字体的兼容问题

• 设置字体用font-family

• 企业开发中设置字体用英文或者unicode编码,不要用中文

  • 如果使用了中文,如果保存的字体编码方式与网页编码方式不匹配会出现乱码

input背景的兼容问题

• 当input输入的内容超过input长度时,背景图片会被顶出input
• 解决方案: background: url("") no-repeat fixed;
  • 用fixed设置背景关联即可解决

input边框兼容问题

• 当input被div包裹时,

PNG24兼容问题

• 问题:png背景透明的图片在ie6及以下的浏览器中,背景自动填白

解决问题方法一:

1.先导入第三方的js框架(js/DD_belatedPNG_0.0.8a.js)
2.编写一段js代码(引号里面的是出现兼容问题的标签)
<script>DD_belatedPNG.fix("img")</script>

• 注意点:如果背景图片设置给body不可用

解决问题方法二:

由于第三方的js框架无法解决body的背景在IE6下不透明的问题, 所以可以使用如下方式来解决
_background-image:none;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/lnj123.png", sizingMethod="crop");

• 注意点:
  1.一定要给body设置宽度和高度, 在企业开发中, 一般我们都会给body设置宽度和高度为100%
  2.src=""要修改为我们需要设置的图片地址

浮动的兼容问题

• 在ie6中,如果父元素的宽度是由子元素撑起来的,那么在ie6中父元素浮动会失效
• 解决方案: 让子元素也浮动

盒模型的默认高度

• 在IE6浏览器下， 盒模型的最小高度是19px， 所以如果设置了盒模型的高度为1px， 也会显示位19个px
  注意点： 在其它浏览器都没有问题
• 解决方案:
  • 如果现在IE6浏览器下设置盒模型的高度为1px， 那么需要再添加一个属性
    overflow: hidden;(触发BFC)

父子盒子包裹问题

• 问题:
  在其它浏览器中， 如果子元素的宽高大于父元素的宽高， 那么不会把父元素撑开
  但是在IE6浏览器下， 如果子元素的宽高大于父元素的宽高，那么父元素会被子元素撑开

• 解决方案：
  在企业开发中， 不要让子元素的宽高大于父元素的宽高

• 如果在企业开发中子元素必须要大于父元素， 那么可以添加overflow: hidden;
  overflow: hidden;含义： 将超出父元素的部分剪切掉