浏览器兼容、图片格式


html里的hack:

<!--[if lte IE 9]>;小于等于 IE9版本

  这是代码

<![endif]-->;结束

lte :less than(小于) or equal(等于);

css的hack:值的 hack,选择器的hack

  IE6及以下的hack符号:_下划线和 - 减号,加在属性前面

  IE6、7的hack符号:!叹号,加在属性前面

  IE8的hack符号:\0/  加在属性值后面

  IE6、7、8、9、10hack符号:\9  加在属性值后面

选择器的hack:

  IE6 及以下版本的hack符号:* html   加在选择器前面   (* html  .box)

  IE7及以下版本的hack符号:,  加在选择器后面(.box,)

  除了IE6的hack符号:html>body   加在选择器前面,(html>body  .box)

IE6 盒模型:

  字号的像素不能大于 盒子的高度  解决方法:字号的像素变小

浮动的浏览器兼容:

  高级浏览器:不浮动的元素会到浮动元素下面

  IE6:在浮动元素后面的不会出现压盖效果    解决方法:不要用浮动制作压盖,同级元素,一个浮动另一个也要浮动

  IE6 像素 bug

    如果元素一个浮动,一个不浮动,IE 6 里会并排排列,同时两个元素之间多了 3 像素间距   

    解决方法:1.同级元素全都浮动

         2.给浮动的元素添加一个  margin-right   值为负数

  IE6 图片边框问题:

    图片外包裹了一个 a 标签,在 IE6 里会比正常情况给图片多加了一个蓝三色的边框

    解决方法:给 img  都清除边框 (border:none)

   双倍 margin 问题

    如果浮动的方向和 margin 边距的方向相同,那么首个浮动的元素,距离父盒子的边距

    是 margin 值的两倍。

     解决方法:1.浮动的方向与 margin 的方向相反,父盒子和第一个元素的间距用父盒子的 padding挤出来

  图片格式:

    JPG图片点:可以压缩,品质可以调整,缺点:不能保存图层、背景透明、图片半透明的效果

      用途:有实际意义的结构,用作插入图,背景不是透明的背景图,图片比较小

    PNG图片:特点:可以保存图层,缺点:文件太大

      如果保存的图片背景透明,文件色彩,形状都比较简单,png图片到处成没有图层的时候,文件反而比JPG要小

      用途:背景透明和半透明的图片,精灵图,图片比较小,色彩不是很复杂

    GIF:特点:色彩单一,品质不能调,文件比较小,能保存图层,支持透明,不支持半透明,能做动图

      用途:动图,,解决IE6 图片透明

     


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM