css ie7 ie8与 IE8 是否可以共存

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。
HTML5的新标签元素有:
&header&定义页面或区段的头部;
&footer&定义页面或区段的尾部;
&nav&定义页面或区段的导航区域;
&section&页面的逻辑区域或内容组合;
&article&定义正文或一篇完整的内容;
&aside&定义补充或相关内容;
使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。
方式一:Coding JavaScript
&!--[if lt IE9]&
(function() {
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
while (i--){
document.createElement(e[i])
&![endif]--&
如果是IE9以下的IE浏览器将创建HTML5标签,&这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。
第二种方法:使用Google的html5shiv包(推荐)
&!--[if lt IE9]&
&script src="/svn/trunk/html5.js"&&/script&
&![endif]--&
但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?
我们可以参照facebook的做法,即引导用户进入带有noscript标识的&&/?_fb_noscript=1&页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。
&!--[if lte IE 8]&
&noscript&
&style&.html5-wrappers{display:none!}&/style&
&div class="ie-noscript-warning"&您的浏览器禁用了脚本,请&a href=""&查看这里&/a&来启用脚本!或者&a href="/?noscript=1"&继续访问&/a&.
&/noscript&
&![endif]--&
这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。
阅读(...) 评论()Css Hack 大全(IE6、IE7、IE8、IE9 css hack)
素材网19499 次
微软公司将于明年4月份取消XP对IE6的支持,哈哈,神助前端开发者也!
1. *html Selector {} /* Selector 表示 css选择器 下同 */
2. Selector { _property: } /* property: value 表示 css 的属性名: 属性值 下同 */
3. Selector { _property/**/: /**/ }
4. Selector { -property: } /*常用习惯推荐使用下划线_ */
1. *+html Selector {}
2. *:first-child+html Selector {}
Selector { /* 注意看value值的 */
property: value1; /* W3C MODEL */
property: value2\0; /* IE 8+ */
property: value1\9\0; /* IE 9+ */
四、IE6、IE7、IE8共有的css hack:
Selector { property: value\9; }
五、IE6、IE7共有的css hack:
1. Selector { *property: }
2. Selector { #property: }
3. Selector { +property: }
六、IE8+ css hack:
Selector { property: value\0; }
七、IE9+ css hack:
Selector { property: value\9\0; }
八、判断方式:
&!–[if !IE]&&!–& 除IE外都可识别 &!–&![endif]–&
&!–[if IE]& 所有的IE可识别 &![endif]–&
&!–[if IE 6]& 仅IE6可识别 &![endif]–&
&!–[if lt IE 6]& IE6以及IE6以下版本可识别 &![endif]–&
&!–[if gte IE 6]& IE6以及IE6以上版本可识别 &![endif]–&
&!–[if IE 7]& 仅IE7可识别 &![endif]–&
&!–[if lt IE 7]& IE7以及IE7以下版本可识别 &![endif]–&
&!–[if gte IE 7]& IE7以及IE7以上版本可识别 &![endif]–&
&!–[if IE 8]& 仅IE8可识别 &![endif]–&
&!–[if IE 9]& 仅IE9可识别 &![endif]–&
The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
NOT运算符。这是摆立即在前面的功能,操作员,或子表达式扭转布尔表达式的意义。
[if lt IE 5.5]
The less-than operator. Returns true if the first argument is less than the second argument.
小于运算符。如果第一个参数小于第二个参数,则返回true。
[if lte IE 6]
The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
小于或等于运算。如果第一个参数是小于或等于第二个参数,则返回true。
[if gt IE 5]
The greater-than operator. Returns true if the first argument is greater than the second argument.
大于运算符。如果第一个参数大于第二个参数,则返回true。
[if gte IE 7]
The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
大于或等于运算。如果第一个参数是大于或等于第二个参数,则返回true。
[if !(IE 7)]
Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
[if (gt IE 5)&(lt IE 7)]
The AND operator. Returns true if all subexpressions evaluate to true
AND运算符。如果所有的子表达式计算结果为true,返回true
[if (IE 6)|(IE 7)]
The OR operator. Returns true if any of the subexpressions evaluates to true.
OR运算符。返回true,如果子表达式计算结果为true。
推荐阅读:
61 人Likes
您可能还会对这些文章感兴趣!
汇聚素材网是一个致力于分享免费素材、模版程序、PSD素材、矢量素材、设计欣赏、网页设计、建站源码、网页重构、字体下载的免费素材网。建立本站旨在与更多人分享网络资源给人们带来的快乐与精彩!
汇聚素材网为个人免费素材网,本站内容仅供观摩学习交流之用,将不对任何资源负法律责任。如有侵犯您的权利,请及时联系本站,本站将尽快处理。bootstrap 貌似对 IE7, IE8 支持得不好,有什么解决方案? · Ruby China
如题,bootstrap 貌似对IE7, IE8支持得不好,有什么解决方案?
bootstrap用的css3.0很多。。。。。。要自己改才行。
我打算给公司程序猿搞个css框架。就想把bootstrap扔过去,可惜兼容不好。
编辑都是IE6居多。只好回头自己写吧。
有的,让你的客户不要用IE,^^
IE8勉强显示算正常,IE7显示不正常。还好,许多公司已经开始升级至IE8。相信未来一段时间IE7流量会剧减。
可以考虑把Blueprint和Bootstrap融合
要DIY用960grid或者Blueprint吧,
实在要用,可以考虑:
1.html5boillerplate -&
2.foundation -&
3.skelon -&
用compass不要用bootstrap, 用css3PIE让ie6-8支持部分css3
简单,和huacnlee的看法一致,我们一般是叫客户要么用IE9,要么不用IE,要享受,他们也要作出努力
bootstrap 就是拿來 bootstrap project 的,本來就不適合用來幹正經網站
bootstrap对IE的支持真烂,但它的确非常的强大。
果断放弃IE7/8。别忘记还有IE6,那在中国是使用人最多的浏览器。
后期怎么改呢?有没有什么成熟的方案?
放弃IE6 ,IE7/8还是兼容的
作为专业人士,我们有义务将客户引领到更美好的世界。团结起来拒绝提供ie老版本的支持,他们自然乖乖的与时俱进!
你推荐的几个css framework似乎都是从ie7开始支持的。IE6完全木有办法啊~~~。
说起来关于bootstrap是否需要ie6的问题。在github上有一贴issue讨论过。我也去凑过热闹。不过人家的态度很明显,打死不支持IE6,不是不能,是不想。
这里引一个老外的解决方案:
... to hope for ie6 support, but I think that it will be difficult to make bootstrap compatible. I'm using a js library called moderizr.js to add classes to the html tag that tells what the browsers capabilities are and then making special css classes that will allow ie6 to gracefully downgrade as much as possible. I think that it is an alright solution. It won't look exactly the same, but it still should work.
很赞同,设想全世界的网站都是twitter风格的时候,也很无聊。
有没有什么方案能支持到ie6呢,我们这种在组织内部开发系统的,超级难受啊
组织内部的要什么兼容性啊,这不是没事内耗玩吗?
其实无所谓,继续在bootstrap上做包装即可。
强大的体制内,你懂的,机器都拆了win7装xp,系统都是ie6兼容
可以试试 bsie,Bootstrap IE6 兼容库,
我们也是用moderizr.js来兼容IE,效果还可以。
后续版本好像IE直接不支持了
其实就算不考虑IE,你的网站如果真正是个产品的话,bootstrap中能直接用的也不多。bootstrap有它的场景。
但是它提供了一种思路,一种做这件事的思路和方式。
我们自己可以搞一套出来,适合自己的项目和网站的需要。
我觉得是这样的。
bootstrap3怎样兼容ie7?
我这里ie8可以兼容 ie7不行
我的网站: 就是用bootstrap3做的,ie8/9/11兼容性已经没有问题了,大家可以去看看,直接查看源码,就能知道怎么解决了。但是icon在ie8里面不显示了,不知道大家有没有好的解决办法。
另外,我的博客上也有描述:
29楼 已删除
后方可回复, 如果你还没有账号请点击这里 。
共收到 29 条回复推荐这篇日记的豆列
······

我要回帖

更多关于 ie7和ie8 的文章

 

随机推荐