不用CSS Hacks 后的浏览器兼容方案分享

涉及到的条件注释代码如下：

 代码如下 复制代码
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

使用说明如下：

 代码如下 复制代码
.test {
    /* 针对非 ie 浏览器的样式 */
}
.ie .test {
    /* 针对所有 ie 版本的样式 */
}
.ie6 .test {
    /* 针对 ie6 的样式 */
}
...
.ie9 .test {
    /* 针对 ie9 的样式 */

}之前那篇文章里也有同学提出通过 PHP 判断 UA 参数并动态输出样式表的方法，这个虽然是简洁明了，但和后端代码耦合在一起，总觉得不是一回事。况且实际应用中很多情况下会将页面模板化，做动态输出并不非常适合。

时间： 2024-10-27 09:56:02

不用CSS Hacks 后的浏览器兼容方案分享的相关文章

DIV+CSS必须考虑的浏览器兼容的技巧

1,盒解释器的不同解释.#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0 } #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0- } 2,在ie中隐藏css,使用子选择器 html>body #box{ } 3,只有ie识别 *html #box{ } 4,在ie/win有效而ie/max隐藏,使

div css javascript 浏览器兼容手册

div css教程 javascript教程 浏览器兼容手册 并不一定全,有的也可能不准确,比如新出的IE8.Chrome等都没有太多涉及,虽然最近做的一些项目也兼容了IE8.Chrome等,但都没来的及总结进去,后来就忘了...汗.大家一起慢慢完善吧. javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运行 解决方法: 改用 document.f

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机-内核. 多年前我们一直为IE6兼容烦恼,为它没少加

web前台技术学习总结(1)-CSS实现全浏览器兼容的ellipsis

参加项目已经有一段时间了,笔者在web标准设计方面的学习有了不少进步.之 前学习和实践都是边Google边看书进行的,只输入没输出,也很少和大家进行交流 .项目已经接近尾声,有必要进行总结,把自己学到的悟到的在博客园与大家分享 交流,同时温故知新,希望在此过程中学到更多的东西.于是,就有了本系列文 章. 最开始来一个比较容易说的清楚的吧. 截取固定长度字符有很多实现方法:一是让后台直接截好后写到前台,二是当 DOM加载完后用JS截取,第三就是用CSS来进行.第一个方法对于前台来说不用做什 么操作

浏览器兼容手册javascript,css

浏览器兼容手册javascript,css javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运行 解决方法: 改用 document.formName.elements["elementName"] 2. 集合类对象问题 问题: 代码中许多集合类对象取用时使用(),IE能接受,FF不能 解决方法: 改用 [] 作为下标运算,例

CSS兼容方案最新的一些技巧

CSS兼容方案最新的一些技巧-浏览器兼容教程 让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } * html .e{ background-color:#000000;/*OP*/ *background-color:#0

解决跨浏览器兼容的CSS编码准则

浏览器越来越多,也就意味着做web前端开发的就越困难.现在的浏览器的内核都同,对于css的兼容也会有一定的差别!以前讲的用css hack来也不是一件容易的事,用过多的css hack来兼容也会出现许多臃肿的代码:所以掌握一些跨浏览器兼容的css编码准则是非常有必要的. 第一:理解css盒子模型(学习div+css布局也是很重要的,学会的css的盒子模型学习div+css也就不难了) 透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE

不同浏览器兼容的CSS编码准则

掌握一些跨浏览器兼容的css编码准则是非常有必要的. 第一:理解css盒子模型(学习div+css布局也是很重要的,学会的css的盒子模型学习div+css也就不难了) 透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器. CSS 盒子模型负责处理以下事情: 一个 blcok (区块)级对象占据多大的空间 该对象的边界,留白 盒子的尺寸 盒子与页面其它元素的相对位置 CSS 盒子模型有以下准则: Block (区块)对象都是矩

编写跨浏览器兼容的 CSS代码的金科玉律

作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧. 理解 CSS 盒子模型 如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器. CSS 盒子模型负责