做前端静态页面的时候总是发现,ie的兼容性很差,总会出点问题。然后就去改代码 ,改完以后 又发现 火狐 谷歌又挂了,这可咋整。
    后来发现做个判断吧 哪里有问题哪里就做个判断呗 ,咋判断呢,这么判断。
 
 <!--[if lte IE 6]>
<![endif]-->
IE6及其以下版本可见,就是ie5,ie4.。。的话 就调用这个css。

<!--[if lte IE 7]>
<![endif]-->
同道理了。。同上

<!--[if IE 6]>
<![endif]-->
同道理了。。同上

<![if !IE]>
<![endif]>
同道理了。。同上

<!--[if lt IE 8]>
<![endif]-->
IE8以下的版本可见

<!--[if gte IE 7]>
<![endif]-->
同道理了。。同上

这么判断就行,你可以没事试试
 <!––[if IE]>
       <h1>您正在使用IE浏览器</h1>
       <!––[if IE 5]>
           <h2>版本 5</h2>
       <![endif]––>
       <!––[if IE 5.0]>
           <h2>版本 5.0</h2>
       <![endif]––>
       <!––[if IE 5.5]>
           <h2>版本 5.5</h2>
       <![endif]––>
       <!––[if IE 6]>
           <h2>版本 6</h2>
       <![endif]––>
       <!––[if IE 7]>
           <h2>版本 7</h2>
       <![endif]––>
<![endif]––>
那如果当前的浏览器是IE,但版本比IE5还低,该怎么办呢,可以使用<!–[if ls IE 5]>,当然,根据条件注释只能在IE5+的环境之下,所以<!–[if ls IE 5]>根本不会被执行。
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判断符相同

(2)
来,看个我写过的东东。
<!–- 默认先调用css.css样式表 –->

<link rel="stylesheet" type="text/css"
href="css.css" />
<!-–[if IE 7]>

<!–- 如果IE浏览器版是7,调用ie7.css样式表- –>

<link rel="stylesheet" type="text/css"
href="ie7.css" />
<![endif]–->

<!–-[if lte IE 6]>

<!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–>

<link rel="stylesheet" type="text/css"
href="ie.css" />
<![endif]–>

其他浏览器的话 都好调了 自己调呗。。试试看

如何根据不同的浏览器写不同的css样式达到兼容的更多相关文章

  1. 如何让不同浏览器调用不同的CSS样式

    如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...

  2. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

    区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

  3. 不同浏览器CSS样式不兼容问题

    一句话,我想的太复杂了.向朋友请教才了解到,其实只要加个判断即可,首先获取到浏览器的基本信息,像什么版本啊,名称啊.默认语言啊等等,然后根据不同浏览器默认加载不同CSS样式即可,获取浏览器版本的连接如 ...

  4. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  5. chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

    参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...

  6. 各种浏览器兼容篡位的css样式写法

    谷歌浏览器的识别 @media screen and (-webkit-min-device-pixel-ratio:0) { height:10px; } IE6特制识别的 *HTML .Searc ...

  7. IE 和 FF 写不同的CSS

    .FireFox 下如何使连续长字段自动换行 众所周知IE中直接使用word-wrap:break-word 就可以了, FF中我们使用JS插入的技巧来解决 <style type=" ...

  8. 正确分析结构使用正确的HTML标签。CSS样式写一起。

    在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...

  9. 经典面试题:浏览器是怎样解析CSS的?

    摘要: 理解浏览器原理. 解析 一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何 CSS.这可以是单个文档内的 CSS.<style>标记内的 CSS,也可以是 DO ...

随机推荐

  1. JQuery执行DOM批量克隆并插入的提效方法

    JQuery clone方法可以实现对指定DOM对象的快速复制,并插入文档中. 对于同一类型的对象往往需要按照同一样式模板(HTML标签代码)复制N份并插入文档中,然后再将内容填入模板中,这就需要批量 ...

  2. request.get request.GET……

    发现他们是不同的. 报错: AttributeError at /add/ 'WSGIRequest' object has no attribute 'get' Request Method: GE ...

  3. Java位运算符

    & 两个二进制数的相同位比较,都为1,结果为1,否则结果为0. | 两个二进制数的相同位比较,只要有一个为1,结果就为1,否则为0. ~ 对一个二进制数的每一位取反,原值为1,取反为0,原值为 ...

  4. c++ type_info and typeid

    c++ type_info and typeid typeid 关键字typeid提供了对一个对象查询类型的功能. 该关键字和dynami_cast一起提供了c++的RTTI(rumtime type ...

  5. Qt之多窗口切换

    在新建对象(下一页面)的时候,把自身的this指针带进去,然后把自身hide(),隐藏起来,在(下一页面中)要回退的时候只需通过: 1. parentWidget()->show(); //显示 ...

  6. javascript中的自增与自减

    一直都对自增与自减的执行顺序有点糊涂,今天查了资料,来总结一下 a++(a--),就是指当时计算a,当下一次使用这个变量的时候才执行++或者-- ++a(--a),就是指当时就计算++或者-- 例1: ...

  7. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  8. Scala-Trait:混入与多态

    Scala 的 Trait 结合了抽象类与接口的能力,通过混入来获得灵活的多态能力. 代码如下所示: FileAbility 提供了读取文件.处理文件的能力, 其中继承一个空实现的 Trait:Lin ...

  9. cargo failed to finish deploying within the timeout period [120000]

    cargo插件,报错:failed to finish deploying within the timeout period [120000] 解决方法:配置timeout为0 <plugin ...

  10. 关于mysql中int(1)中int后面的数字

    mysql在建表的时候int类型后的长度代表什么? 是该列允许存储值的最大宽度吗? 为什么我设置成int(1), 也一样能存10,100,1000呢.  当时我虽然知道int(1),这个长度1并不代表 ...