如何根据不同的浏览器写不同的css样式达到兼容
做前端静态页面的时候总是发现,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样式达到兼容的更多相关文章
- 如何让不同浏览器调用不同的CSS样式
如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !import ...
- 不同浏览器CSS样式不兼容问题
一句话,我想的太复杂了.向朋友请教才了解到,其实只要加个判断即可,首先获取到浏览器的基本信息,像什么版本啊,名称啊.默认语言啊等等,然后根据不同浏览器默认加载不同CSS样式即可,获取浏览器版本的连接如 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。
参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...
- 各种浏览器兼容篡位的css样式写法
谷歌浏览器的识别 @media screen and (-webkit-min-device-pixel-ratio:0) { height:10px; } IE6特制识别的 *HTML .Searc ...
- IE 和 FF 写不同的CSS
.FireFox 下如何使连续长字段自动换行 众所周知IE中直接使用word-wrap:break-word 就可以了, FF中我们使用JS插入的技巧来解决 <style type=" ...
- 正确分析结构使用正确的HTML标签。CSS样式写一起。
在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...
- 经典面试题:浏览器是怎样解析CSS的?
摘要: 理解浏览器原理. 解析 一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何 CSS.这可以是单个文档内的 CSS.<style>标记内的 CSS,也可以是 DO ...
随机推荐
- 关于Js添加版本号
背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就 ...
- Gradle Cheat Sheet
加快编译速度 使用 gradle 2.4 及以上版本 ~/.gradle/gradle.properties 加入如下配置 org.gradle.daemon=true org.gradle.jvma ...
- Oracle 存储过程异常处理
Oracle 存储过程异常处理 1.异常的优点 如果没有异常,在程序中,应当检查每个命令的成功还是失败,如 BEGIN SELECT ... -- check for ’no data f ...
- GridView布局,自定义适配器,水平滚动
添加GridItem布局XML文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- Datatable的查找和排序(Datatable.Select)
Datatable 是一种常用的数据结构.数据类型有点类似于数据库中的表结构.在没有使用优秀的orm框架前,大部分的数据库的数据都是先变为Datatable 然后再通过代码转换变成 object. ...
- call()\apply()\bind()备忘录
这几个玩意儿几乎看一次忘一次,每次用都要重新看一遍,还是理解的不够.本文对不做深入解释,只根据自己的理解对函数定义进行语义化说明. 1.call() fun.call(context,arg1,arg ...
- UICollectionView介绍
文章原出处未知,如有朋友知道,请告诉我,我会补上. 1.1. Collection View 全家福: UICollectionView, UITableView, NSCollectionView ...
- calico docker 应用实例
在上一篇文章<quay.io/coreos/etcd 基于Docker镜像的集群搭建>中,介绍了ETCD集群的搭建.在此基础上,我们进一步实践calico docker的应用. PaaS ...
- MVC5 + EF6 完整入门教程三
期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型,将之前的示例添加数据库查询验证功能. 文章提纲 概述 & ...
- jQuery 选择器 (基础恶补之二)
返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); 下面的例子将返回首个匹配元素的 background-color ...