如何让CSS区别IE版本
关于IE浏览器实在太坑爹了,但你又不得不去解决它,不过就本人所知,IE8—IE10差别不大,至少本人还没有遇到过在IE8环境下到了IE9及以上版本就出现坑爹的问题,但我们又不得不面对IE8以下的版本,说实话,我也不想去处理IE所谓的Bug,但又不得不去处理。谁叫我们都是干苦逼的职业的!
一、CSS规则(IE CSS hacks)
其实也只是在样式里说明一下只有IE识别的CSS规则。比如,在CSS属性前置一个”*”区分IE7和低版本,而前置一个”_”则区分IE7及低版本。但是这个方法最好别用(不是我不推荐),因为这个CSS规则还不能被W3C CSS识别(这就是坑爹之处)。
- * IE8 及 低版本: 在CSS属性后置”\9″, 如
height:100%\9;
- * IE7 及 低版本: 在CSS属性前置”*”, 如
*height:100%;
- * IE6 及 低版本: 在CSS属性前置”_”, 如
_height:100%;
.joks {
background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */
}
二、给HTML加个if条件判断
这办法其实是Paul Irish大神发明的。它实现的办法是通过IE条件判断来给HTML设置不同的className,然后在CSS中通过给不同的className下的后代设置不同的样式即可实现。这个办法比较可行,W3C能识别。
<!--[if lt IE 7 ]>
<html class="ie6"> < ![endif]-->
<!--[if IE 7 ]> </html>
<html class="ie7"> < ![endif]-->
<!--[if IE 8 ]>
</html>
<html class="ie8"> < ![endif]-->
<!--[if IE 9 ]>
</html>
三、用IE条件判断语句
其实说白了,这个方法大家都在用,而且用的人还挺多的,没办法,至少大牛们是不会这么干的(别急,大牛的方法我会讲的。)
IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了(我刚刚已经说了,IE8以上的版本差别不大)。看看下面用来区分IE不同版本的代码:
<!--[if IE 8]>
= IE8版本<!--[if lt IE 8]>
= IE7版本以低版本<!--[if gte IE 8]>
= IE8版本及高版本
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
< ![endif]--> <!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
< ![endif]-->
四、自我感觉方法(大牛靠感觉来做)
这个方法我可不推荐,但是如果你了解每个版本的Bug的话,那你到可以试试,当然了,IE6和IE7再到IE8识别的间距有所不同,但当你设计版面的时候,我个人推荐你可以试试把间距扩大到20px以上,这样才不会出现IE间距的Bug,当然了,其它的Bug方式还有许多,这里我就不一一介绍了!至少我想说,避免Bug是不可能的,规则是死的,但方法是活的,靠的是想像力而已。
如何让CSS区别IE版本的更多相关文章
- asp.net mvc处理css和js版本问题
当服务的修改了js和css内容后,发布到IIS服务器上,总是导致客户端内容显示不正确,原因是客户端存在缓存,还是加载的原来的js和css问题. 在css或js后面添加版本号,例如: <scrip ...
- 15款不容错过的前端开发Javascript和css类库 - 2017版本~
前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...
- link和@import引入css 区别,不建议使用@import
众多周知,有两种方法可以在页面中导入样式文件. <link href="a.css" rel="stylesheet"> <style> ...
- jQuery设置checkbox全选(区别jQuery版本)
jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...
- i386和x86-64区别通俗易懂版本(转)
x86架构首度出现在1978年推出的Intel 8086中央处理器,它是从Intel 8008处理器中发展而来的,而8008则是发展自Intel 4004的.Intel之后又推出了包括80186.80 ...
- css,区别pc端ipad端的样式
摘自: http://blog.csdn.net/pm_mybook/article/details/54602107 /* 横屏 */ @media all and (orientation:lan ...
- css中import与link用法区别
方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...
- 第 13 章 CSS 选择器[上]
学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
随机推荐
- node.js平台下,利用cookie实现记住密码登陆(Express+Ejs+Mysql)
本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...
- 实时消息传输协议(RTMP)详解
一.概念与摘要 RTMP协议从属于应用层,被设计用来在适合的传输协议(如TCP)上复用和打包多媒体传输流(如音频.视频和互动内容).RTMP提供了一套全双工的可靠的多路复用消息服务,类似于TCP协议[ ...
- 手机自动化测试:appium源码分析之bootstrap八
手机自动化测试:appium源码分析之bootstrap八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣, ...
- [编织消息框架][JAVA核心技术]动态代理应用5-javassist
基础部份: 修改class我们用到javassist,在pom.xml添加 <properties> <javassist.version>3.18.2-GA</java ...
- spring+mybatis事务不起作用的原因
一.场景再现 @Override @Transactional public void updateById(String userId,String username) throws Excepti ...
- 关于for()循环使用过程中遇到的问题(俄罗斯方块游戏中遇到的问题)
for循环的定义: for(参数1:参数2:参数3),参数1通常是初始化参数的,参数2是判断,参数3是对参数的操作.这三个参数都不是必须的. 这里想说的是,参数1的使用:比如下列语 int nLine ...
- 分布式部署网站---文件系统的存储--ftp上传图片到指定文件服务器
问:通常一个网站程序发布在一个iis服务器上,但是如果要分布式部署网站.文件系统该如何存储呢? 答:通常的就是给网站文件系统一个子域名.比如 https://images.web.com. 网站程序内 ...
- iOS各框架功能简述以及系统层次结构简单分析
iOS各个框架所对应的功能简单介绍 iOS系统结构层次:
- Spring Boot 整合 Redis 实现缓存操作
摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 产品没有价值,开发团队再优秀也无济于事 – <启示录> 』 本文提纲 ...
- 人生第一次hash
人生的第一次hash交给了模板题. 讲道理,还没有别人快排要快,就比暴力快那么一点... 难道我写的hash就那么菜么? 我想了想,光是处理字符串就O(n*len).. 这是hash的正确写法吗?我都 ...