标签 前端路上 下的文章

在IE6没屎干净之前,折腾主题还是需要照顾一下IE6啊,继 浏览器兼容问题CSS解决方案 之后,折腾出题使用hack确实解决了不少浏览器兼容问题,但是再往深折腾主题时,我发现,仅仅css的hack功能还是不够的,还需要其它的一些特殊功能辅助之,方才能做到天下浏览器大同啊。

于是老衲摸索之,经百度、谷歌后无果,老衲几乎对其死心了,于是放出“豪言”说不考虑IE8以下浏览器鸟,其实那是老衲我无奈之举啊,当时是实在找不到解决方法了,谁不想让自己的网站在尽可能多的浏览器中展现出最佳的效果呢?好在天无绝人之路,在某天折腾主题时,忽然发现类似下面的代码,于是柳暗花明又一村,又一个佛诞生了:

<!--[if lte IE 8]> /* 解释:IE8及IE8以下版本执行下面代码 */

<script type="text/javascript">window.location.href='http://www.gsky.org';</script>

<![endif]-->

上面的代码是IE独有版本判断语句,老衲我竟然忘记了这一茬,擦,太逊了。。。

之前解决IE低版本某板块内容显示效果不佳的方法就是将其隐藏掉,使用hack的方法就是在对应css中添加 “ *display:none; ” 意思就是在IE6和IE7下,隐藏该内容,方法实在是不错,解决了不少问题,但是有些例如只希望在IE6以上版本中显示就不行了,还好我佛慈悲,让我发现了这么大的秘密,下面就是证据:

hack解决方案请看这里

IE解决方案: <!--[if lte IE 6]> 内容 <![endif]-->(lte是小于或等于的意思)


lte:小于或等于 例如 <!--[if lte IE 7]>,IE7以下版本显示,IE7也显示

lt:小于 例如 <!--[if lt IE 7]>,IE7以下版本显示,但IE7不显示

get:大于或等于 例如 <!--[if get IE 7]>,IE7以上版本显示,IE7也显示

gt:大于 例如 <!--[if gt IE 7]>,IE7以上版本显示,但IE7不显示

!:不等于 例如 <!--[if !IE]>,所有IE浏览器都不显示

<!--[if IE 7]>,只在IE7显示,...IE6、8、9、10 和 其它浏览器不显示

好像就只有这些吧,老衲我就知道这么多,有了这些判断,主题的兼容性问题就能迎刃而解了,而且还可以解决很多问题,慢慢推敲吧。

比如,为IE6调用独自的css:

<!--[if lte IE 6]> css地址 <![endif]-->

使用本方法,然后再搭配hack服用,浏览器兼容问题就可以治愈了,hcsk只能用于css中,ie判断只能用在html代码中,擦,真是天造地设的一对啊,本来还想用php的办法判断当前浏览器,然后输出对应内容呢,看来老衲我修炼还木有到家,真的是把问题复杂化了

  1. P几个S:
  2. 佛说:不要试图使用这个方法定义非IE浏览器,这个判断是IE独有的,非IE浏览器会被直接过滤掉
  3. OK,到此为止,施主且慢走,老衲就不远送了。。。
  1. 再P几个S:
  2. 百度BAE开放给我带来的唯一的好处就是,我的流量增加了近1倍,好家伙200多IP,真不多见;不过今天就恢复正常日IP了,啊丫丫,该高兴呢还是该开心呢,还是装作很痛苦的样子把。。。
  3. 我现在都不舍得百度“Theme Wesky”太让我蛋疼又纠结了 ,用Wesky的某些SEO神马的朋友,代码不见你会多少,版权去的可真不含糊啊。。。

据说浏览器兼容问题曾经一直不被重视,因为国内曾经是IE这个巨无霸的天下,网站只要做好IE就浮云了,但是随着人们的价值品味的改变,和以谷歌、火狐等浏览器领头的冲击,IE的热量在逐渐消退,越来越多的用户使用上了非IE内核的浏览器,目前市面上非IE内核的浏览器主流的、非主流的太多了,所以,前端开发者的难题就来了——浏览器兼容,这个另众多前端开发者头大的问题

懂得CSS的朋友,应该听说过CSS hack,现在的浏览器如IE、Firefox、Chrome、Opera、Safari。。。百家争鸣,可苦了Web前端开发者。下面是我在网络整理的一些资料,希望对大家有所帮助。

浏览器的粗分类

虽然目前流传的浏览器种类颇多,但是实际上可以将所有主流浏览器大致的分为两个类型:

1、IE内核浏览器(IE6、IE7、IE8、360浏览器、QQ浏览器、傲游浏览器)

2、标准浏览器(狐火浏览器、Safari浏览器、Opera浏览器、Google浏览器)

不同的浏览器对CSS的解释都有一些特殊情况,特别是padding, line-height这些要细微控制的地方,下面的hack基本可以解决这个问题:

1、在属性前加下划线(_),那么此属性只会被IE6解释;

2、在属性前加星号(*),此属性只会被IE7解释;

3、在属性值后面加"9",表示此属性只会被IE8解释

各浏览器CSS hack兼容表:

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

color:red; / IE6、IE7支持 */

+color:red; / IE7支持 */

color:red9; /* IE6、IE7、IE8支持 */

color:red; /* IE8支持 */

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

color:red; / IE6、IE7支持 */

+color:red; / IE7支持 */

color:red9; /* IE6、IE7、IE8支持 */

color:red; /* IE8支持 */

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

当然,我只是粗略的列举的一些,更多资料你可以打开这里 更可以打开这里