您现在的位置是:网站首页> 编程资料编程资料
用条件注释判断浏览器版本解决页面兼容问题浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
2021-09-06
1050人已围观
简介 在IE8、IE9上可能好好的,当我们在IE6、IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,那么如何解决兼容问题呢,本文就为大家一一道来
对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8、IE9上可能好好的,当我们在IE6、IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢?
首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因为不同的浏览器在解析页面时,他们所遵循的规则并不是完全相同的。比如IE,不同的版本解析都不同,何况是不同的浏览器厂商,不同的内核呢。但是我们在遇到兼容性问题时,应该首先检查我们自己写的代码,看看是不是自己的问题,然后再去追究浏览器的问题。还有,在遇到兼容性问题时,不要动不动就用CSS Hack技术,因为CSS Hack技术并不是W3C所推崇的,因此,不到万不得已,尽量不要用。
好了,说了一大堆,下面我们进入正题:
注释不同的浏览器版本
(1)、支持所有的IE浏览器(不包括IE10标准模式)
(2)、所有非IE浏览器(不包括IE10标准模式)
(3)、IE10浏览器
目前还没有找到该版本浏览器的像
(5)、IE8浏览器
(6)、IE7浏览器
(7)、IE6浏览器
(8)、IE10以下版本浏览器(不包括IE10)
(9)、IE9及IE9以下版本浏览器(包括IE9)
(10)、IE6以上版本浏览器(不含IE6)
(11)、IE7及IE7以上版本浏览器
那么我们该怎么运用呢?我们不可能为了兼容像上面那么写,把整页的内容分别写在不同的注释块内。其实这里有两种方法:
方法1、根据不同的浏览器版本,载入不同的css
如我们需要分别兼容IE6、7、8,我们可以这样做
方法2、根据不同的浏览器版本,给html或body挂载不同的类如
最后我们看一下lt,lte,gt,gte分别表示什么
lt:小于当前版本
lte:小于或等于当前版本,包括本身
gt:大于当前版本
gte:大于或等于当前版本,包括本身
好了,我们今天就到这里,大家可能已经知道怎么简单的处理浏览器兼容了,那么下次我们接着介绍一些CSS Hack技术,更进一步的处理浏览器兼容
测试代码:
用条件注释判断浏览器版本,解决兼容问题
首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因为不同的浏览器在解析页面时,他们所遵循的规则并不是完全相同的。比如IE,不同的版本解析都不同,何况是不同的浏览器厂商,不同的内核呢。但是我们在遇到兼容性问题时,应该首先检查我们自己写的代码,看看是不是自己的问题,然后再去追究浏览器的问题。还有,在遇到兼容性问题时,不要动不动就用CSS Hack技术,因为CSS Hack技术并不是W3C所推崇的,因此,不到万不得已,尽量不要用。
好了,说了一大堆,下面我们进入正题:
注释不同的浏览器版本
(1)、支持所有的IE浏览器(不包括IE10标准模式)
(2)、所有非IE浏览器(不包括IE10标准模式)
(3)、IE10浏览器
目前还没有找到该版本浏览器的像
(5)、IE8浏览器
(6)、IE7浏览器
(7)、IE6浏览器
(8)、IE10以下版本浏览器(不包括IE10)
(9)、IE9及IE9以下版本浏览器(包括IE9)
(10)、IE6以上版本浏览器(不含IE6)
(11)、IE7及IE7以上版本浏览器
那么我们该怎么运用呢?我们不可能为了兼容像上面那么写,把整页的内容分别写在不同的注释块内。其实这里有两种方法:
方法1、根据不同的浏览器版本,载入不同的css
如我们需要分别兼容IE6、7、8,我们可以这样做
复制代码
代码如下:方法2、根据不同的浏览器版本,给html或body挂载不同的类如
复制代码
代码如下:最后我们看一下lt,lte,gt,gte分别表示什么
lt:小于当前版本
lte:小于或等于当前版本,包括本身
gt:大于当前版本
gte:大于或等于当前版本,包括本身
好了,我们今天就到这里,大家可能已经知道怎么简单的处理浏览器兼容了,那么下次我们接着介绍一些CSS Hack技术,更进一步的处理浏览器兼容
测试代码:
复制代码
代码如下:
相关内容
- CSS3 Columns分列式布局方法简介CSS columns实现两端对齐布局的示例代码浅谈CSS 多栏布局(Multi-Columns Layout)
- css实现字符串截断并加省略号示例兼容IE和FF的单行溢出文本显示省略号-CSS教程-网页制作-网页教学网字符串过长CSS截取多余文字并用省略号显示通过纯CSS样式实现DIV元素中多行文本超长自动省略号css样式显示省略号自定义宽度超过隐藏显示省略标记CSS省略号text-overflow超出溢出显示省略号CSS 控制字符宽度省略号效果 兼容浏览器CSS文本超出div或者span时用省略号代替
- 纯css绘制蜂巢六边形效果css3实现六边形边框的实例代码css画正六边形的两种方法css实现六边形图片的示例代码CSS实现图片背景填充的六边形的示例代码CSS3绘制六边形的简单实现纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)CSS 实现蜂巢/六边形图集的示例代码
- 一个不错的html视频播放器兼容主流浏览器实现简易html视频播放器的方法
- 设置网站二级导航及把二级导航做的好看设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- css及js调用方法详细汇总CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css行内元素padding,margin,width,height没有变化CSS中height和width在IE和其他浏览器中的区别图文详解IE6不支持CSS中的min-width/height属性问题的解决方法
- 使用css3实现超炫的loading加载动画效果详解纯CSS3制作的20种loading动效CSS3实现10种Loading效果 CSS3轻松实现清新 Loading 效果的简单实例使用CSS3制作饼状旋转载入效果的实例浅析与CSS3的loading动画加载相关的transition优化8款使用 CSS3 实现超炫的 Loading(加载)的动画效果纯CSS3实现的8种Loading动画效果css3如何绘制一个圆圆的loading转圈动画
- 任意一块网页内容实现“活”的背景(目前火狐浏览器专有)css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果