如何根据不同的浏览器写不同的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 ...
随机推荐
- 正则表达式获取字符串中的img标签中的url链接
废话不多说直接看代码 JavaScript中的代码: var re = /src=\"([^\"]*?)\"/i; var arr = str.match(re); if ...
- Eclipse定制右键创建文件快捷菜单
打开窗口“Customize Perspective - Java EE”,切换选项卡到“Shortcuts”: 进行一下配置: “Generate”:如上图勾选方式 "Java" ...
- IntelliJ IDEA Community Edition 14.1.4下使用 Apache-Subversion搭建代码管理环境
当前我的idea 版本是14.1.4. 1,)SVN Server下载与安装(https://www.visualsvn.com/server/): 因为我开发机是x64的,所以我优先下载 x64的 ...
- 列间距column-gap
column-gap主要用来设置列与列之间的间距,其语法规则如下: column-gap: normal || <length> 取值说明 属性值 属性值说明 normal 默认值,默值为 ...
- CentOS 命令模式下设置静态IP
ASP.NET程序猿第一次修改IP,之前没有接触过Linux,有点伤不起... # cd /etc/sysconfig/network-scripts/ # ls 会看到 ifcfg-eth0 if ...
- ThinkPHP讲解(十)——第三方类的引入:以分页为主
第三方类的引入,以分页类为例: 1.在控制器里新建一个分页的操作方法FenYe() 注意:第三方类Page.class.php放在Think或Home文件夹下,并新近一个文件夹,放在里面,并在其类里加 ...
- 优化Myeclipse10 Building Workspace速度慢等问题
今天把ext3.0部署到web project很慢很慢,查了一下,这个当笔记.转自http://blog.163.com/jong_cai/blog/static/870280452013111781 ...
- Intel+Ardruino 101 翻转时点灯
/* =============================================== Example sketch for CurieIMU library for Intel(R ...
- Linux之grep命令详解
简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...
- awk改变了OFS,$0却没变化
一个文件1.txt,内容如下 a b c d e 目的把列变行,输出为: a b c d e 脚本如下: awk 'BEGIN{RS="";FS="\n";OF ...