图片后缀引发的浏览器兼容问题

帮一同事调试页面的bug。记录一下过程,以后要多角度考虑问题。

问题描述:用css sprite做的背景,在firefox下面显示正常,ie6/7/8无效。已判断非haslayout问题。

看了一下html结构怎一个混乱了得。心想可能是这里的问题,刷新还报脚本错误,修正了脚本路径,屏蔽了脚本,问题仍旧在。只好耐住性子,整一下html结构,整理了head区,发现问题仍旧。

无奈之下开了chorme测试一下,正常显示。依旧ie不行。

心想是不是图片的问题,试一下吧。就在页面上插入了该背景图。惊现,ie显示为一个X,路径是对的。另两个正常显示。看来确实是这张图片的问题。

看了这张图片,是gif格式的本地预览也是正常的,在思考什么样的gif,ie会不认识。想了半天,没有好答案。

想了一下,印象里面这张图片好像是png的。于是将图片改为png,这下三个浏览器都可以了。

浏览器之间对于图片显示的问题确认让人烦。将.png改为.gif,firefox和chrome认,ie不认。如果统一就不会出现这次的问题了。期待某款浏览器能一统天下。

CSS Hack和CSS Conditional Comments

如果你的web站点或应用程序是供给不同的浏览器用户使用的,那么你可能就需要使用到CSS Hack和CSS Conditional Comments,本质上CSS Conditional Comments是CSS Hack的一种。如果你的web站点CSS不是特别复杂,用CSS Hack就能够解决浏览器CSS兼容性问题,但是如果你的站点对用户体验要求比较高或者设计非常绚丽,用CSS Conditional Comments(CSS 条件注释)将是你更好的选择。简单的来说,CSS Hack是通过一些特殊的字符来区分IE6/7/8以及Firefox的,CSS Conditional Comments是给不同的浏览器加载不同的CSS文件(当然,这也可以用js来做)。

一、CSS Hack

CSS Hack是通过一些特殊的字符来区别IE 6, IE 7, IE 8和Firefox的,浏览器对于不能识别的字符,将会直接过滤掉,有很多字符能够用于CSS Hack,在这里有一个非常详细的列表,下面我只列出了一些比较常用的Hack字符。 

  IE6 IE7 IE8 FireFox
_ × × ×
* × ×
*+ html × × ×
!important ×
\9 ×
\0 × × ×
@import ‘style.css’

@import “style.css”

@import url(style.css)

@import url(‘style.css’)

@import url(“style.css”)

 

 

 

 

 

 

 

 

1. _    *    \9    !important

/*区别Firefox和IE 6*/
body{
 background-color: red;  /* Firefox */
 *background-color: yellow; /* IE6/7 */
}

/*区别Firefox 和 IE 7*/
 body{
  background: orange;
  *background: green;
 }

       /*区别IE 7 和 IE 6*/
/*ie7显示绿色,ie6显示蓝色*/
body{
 background: green !important;
 *background: blue;
}

/*区别IE和Firefox*/
 body{
  background-color: red;  /* 所有浏览器都支持 */
  background-color: yellow\9; /* IE6/7/8   */
 }

/*区别IE6/7/8和其他浏览器*/
body{
 background-color: red;  /* 所有浏览器都支持 Firefox显示红色 */
 background-color: green\9; /* IE6/7/8   IE8显示绿色  */
 *background-color: yellow; /* IE6/7   IE7显示黄色  */
 _background-color: blue; /* IE6    IE6显示蓝色  */
}

从上述代码中,可以看出,书写CSS Hack的顺序为Firefox<IE8<IE7<IE6,由高标准向低标准走。

2.关于!important和*+html

引用:http://www.neoease.com/css-browser-hack/

优先度: (*+html + !important) > !important > +html

#bgcolor {
 background:red !important; /* Firefox 等其他浏览器 */
 background:blue; /* IE6 */
}
*+html #bgcolor {
 background:green !important; /* IE7 */
}

二、CSS Conditional Comments

引用:http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/

http://www.yaosansi.com/post/1000.html

条件注释包含一些判断,不过这些判断并不是在js中执行,而是在html中执行,使用的方法也非常简单。

1.基本使用方法

 <!–[if XXX]>
这里是正常的html代码
<![endif]–>

2.判断IE浏览器的基本语法

<!–[if IE]> / 如果浏览器是IE /
<!–[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!–[if IE 7]> / 如果浏览器是IE 7 的版本 /
<!–[if IE 8]> / 如果浏览器是IE 8 的版本 /

3.逻辑判断

逻辑判断并不是很常用,但是其中的”!”常常用于判断非IE浏览器

lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同

例句:

<!–[if gt IE 6]> / 如果IE版本大于6 /
<!–[if lte IE 7]> / 如果IE版本小于等于7 /
<!–[if !IE]> / 如果浏览器不是IE /

4.使用

<!– 默认先调用css.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”css.css” />

<!–[if !IE]>
<!– 非IE下调用1.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”1.css” />
<![endif]–>

<!–[if lt IE 6]>
<!– 如果IE浏览器版本小于6,调用2.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”2.css” />
<![endif]–>

<!–[if lt IE 7 ]><body><![endif]–>
<!–[if IE 7 ]><body><![endif]–>
<!–[if IE 8 ]><body><![endif]–>>
<!–[if !IE]>–><body><!–<![endif]–>

<style type=”text/css”>
    body.ie6 .test { background-color: blue }
    body.ie7 .test { background-color: red }
    body.ie8 .test { background-color: green }
</style>

作者:Sunny Peng