首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将css样式应用于除IE9之外的其他浏览器?

要将CSS样式应用于除IE9之外的其他浏览器,可以使用以下方法:

  1. 使用CSS前缀:不同浏览器对某些CSS属性的支持可能存在差异,可以通过添加浏览器前缀来适配不同浏览器。常见的浏览器前缀有-webkit-(Chrome、Safari)、-moz-(Firefox)、-o-(Opera)、-ms-(IE)等。例如,要为不同浏览器设置圆角边框样式,可以使用以下代码:
代码语言:css
复制

.box {

代码语言:txt
复制
 border-radius: 10px; /* 标准属性 */
代码语言:txt
复制
 -webkit-border-radius: 10px; /* Chrome、Safari */
代码语言:txt
复制
 -moz-border-radius: 10px; /* Firefox */
代码语言:txt
复制
 -o-border-radius: 10px; /* Opera */

}

代码语言:txt
复制
  1. 使用CSS Hack:CSS Hack是一种通过针对特定浏览器的CSS代码来实现样式适配的方法。但是需要注意的是,CSS Hack可能会导致代码不规范、不易维护,并且在某些情况下可能会被浏览器或者工具误判为错误。因此,建议在使用CSS Hack时谨慎操作,并在必要时添加注释说明。以下是一些常见的CSS Hack示例:
代码语言:css
复制

/ 仅对IE9及以下版本生效 /

.box {

代码语言:txt
复制
 color: red\9;

}

/ 仅对IE8及以下版本生效 /

.box {

代码语言:txt
复制
 color: red\0;

}

/ 仅对IE7生效 /

.box {

代码语言:txt
复制
 *color: red;

}

/ 仅对IE6生效 /

.box {

代码语言:txt
复制
 _color: red;

}

代码语言:txt
复制
  1. 使用JavaScript检测浏览器并添加类名:通过JavaScript检测浏览器类型和版本,然后在HTML元素上添加相应的类名,再通过CSS选择器来应用样式。例如,使用JavaScript库Modernizr可以方便地检测浏览器特性,并添加相应的类名,然后可以通过这些类名来应用不同的样式。
代码语言:html
复制

<div id="box" class="box"></div>

<script src="modernizr.js"></script>

<script>

代码语言:txt
复制
 if (!Modernizr.flexbox) {
代码语言:txt
复制
   document.getElementById('box').classList.add('no-flexbox');
代码语言:txt
复制
 }

</script>

代码语言:txt
复制
代码语言:css
复制

.box {

代码语言:txt
复制
 /* 适用于支持flexbox的浏览器 */
代码语言:txt
复制
 display: flex;

}

.no-flexbox {

代码语言:txt
复制
 /* 适用于不支持flexbox的浏览器 */
代码语言:txt
复制
 display: block;

}

代码语言:txt
复制

以上是几种常见的将CSS样式应用于除IE9之外的其他浏览器的方法。具体选择哪种方法取决于项目需求和兼容性要求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

常见兼容性问题

初始化样式浏览器兼容问题,不同浏览器对标签默认样式值不同,如果不初始化会造成不同浏览器之间显示差异,布局出现错乱,所以要初始化样式,达到统一布局。...* { margin: 0; padding: 0; } 通常使用Normalize.css抹平默认样式差异,当然也可以根据样式定制自己reset.css。...标准还未确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来标准进行兼容,所以每种浏览器使用了自己私有前缀与标准进行区分,当标准确立后,各大浏览器将逐步支持不带前缀CSS3新属性,...以下浏览器不支持HTML5新标签问题,可以使用document.createElement创建元素并设置其CSS样式即可,通常使用html5shiv.js来作为兼容性解决方案。...new Date("2020-06-29".replace(/-/g, "/")); IE条件注释 IE专门提供一种语法,只有IE能识别运行,其他浏览器只会作为注解。 <!

1.8K10

聊一聊“@font-face”

EOT 允许字体作者保护字体不被非法复制,微软不允许其他浏览器厂商使用该格式,因此它只能在 IE 下使用。 这对当时来说太超前了。还记得在 windows XP 下看使用了『微软雅黑』网页吗?...2.需要较少用于反锯齿微调信息(详见下面的参考链接)。除此之外,opentype 基本字符集外还提供了别的扩展,比如小号大写字符,老式数字,以及其他一些图形。...除此之外,它还允许添加元信息,比如字体作者许可证,不过浏览器并不对这些许可做任何验证。 4、#iefix有何作用?...IE9 之前版本没有按照标准解析字体声明,当 src 属性包含多个 url 时,它无法正确解析而返回 404 错误,而其他浏览器会自动采用自己适用 url。...绝大多数情况下,第一个 src 是可以去掉,除非需要支持 IE9兼容模式。在 IE9 中可以使用 IE7 和 IE8 模式渲染页面,微软修改了在兼容模式下 CSS 解析器,导致使用 ?

1.4K50

各大浏览器 CSS Hack 收集

CSS hack是通过在CSS样式中加入一些特殊符号,让不同浏览器识别不同符号(什么样浏览器识别什么样符号是有标准CSS hack就是让你记住这个标准),以达到应用不同CSS样式目的,...可以识别,所以此样式在IE6中实际设置对象宽度为200px,后面的把前面的给覆盖了,而其他浏览器不识别_width不会执行_width:200px;这句样式,所以在其他浏览器中设置对象宽度就是300px...,所以我们对于CSS来说他们来解决各浏览器CSS解释不同所采取区别不同浏览器制作不同CSS样式设置来解决这些问题就叫作CSS Hack。...2、CSS hack解决问题 CSS hack用来解决有些css属性在不同浏览器中显示效果不一样问题,如margin属性在ie6中显示距离会比其他浏览器中显示距离宽2倍,也就是说margin-left...//IE6 } :root element{color:#6669;}//IE9 【说明】:“:root”伪类IE系列只有IE9支持,其他主流浏览器均支持,利用这一点来区分IE8和IE9

1.6K130

在网站或桌面应用使用Font Awesome图标库

比如,twitter用到各种小icon: 这种情况下,使用字体来实现图标就有很多优势: 字体文件小,一般20-50kb; 容易编辑和维护,尺寸和颜色可以用css来控制; 透明完全兼容IE6; 如何将icon...其中,css文件夹中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 两个文档,其他可以删掉。...[endif]--> 如上图,如果是IE浏览器,需要引入 font-awesome-ie7.min.css ,因为fontAwesome支持IE7+浏览器。(唉。。...2.4 其他应用 fontAwesome还有其他更加复杂一点应用,包括固定宽度、浮动、反转、旋转、叠加图标等。...除了TextBlock外,我这里写样式可以应用于任何支持字体显示控件: <Label Content="" Style="{StaticResource

2K20

GitHub 和 Twitter 都在用 CSS

【导语】:Normalize.css 使浏览器呈现所有元素更加一致,符合现代标准。它精确地只针对需要规范化样式。...简介 不同浏览器对于同一个元素会有不一样默认样式,normalize.css 采用和平且高效方式,解决了浏览器默认样式问题,尽可能让同一个 CSS 文件在不同浏览器上显示一样效果。...normalize.css 是一个小 CSS 文件,它在 HTML 元素默认样式中提供了更好浏览器一致性。它是一种现代、支持 HTML5 、替代传统 CSS reset 方法。.../normalize.css 简单使用 normalize.css 修复了 CSS reset 范围之外常见桌面和移动浏览器错误。...包括 HTML5 元素显示设置、更正 font-size 预格式文本、IE9 SVG 溢出以及跨浏览器和操作系统许多与表单相关错误。

4210

这个 CSS 库帮你做汉堡?

这不,有个国外大神,专门开发了一个汉堡包菜单 CSS 动画库,库名称就叫 Hamburgers! 进入 Hamburgers 库官网,可以看到各式各样美味 CSS 动画汉堡。...[image-20210425000009512.png] 如何使用 该库使用方式非常简单,由于是纯 CSS 实现,只需引入一个样式文件: <link href="dist/hamburgers.<em>css</em>...再给上述汉堡包元素<em>的</em>最外层(含有 hamburger 类名)添加风格对应<em>的</em>类名,<em>其他</em>子元素保持不变即可。...如果你想要覆盖 Hamburgers <em>的</em>默认<em>样式</em>,只需要给相同<em>的</em>类名写<em>样式</em>覆盖即可,比如控制内边距: hamburger-padding-x: 30px; 此外,Hamburgers 完美支持无障碍编程...--- 最后,看下这个库<em>的</em><em>浏览器</em>兼容性,由于它使用了 <em>CSS</em>3 3D transforms,因此支持<em>除</em> <em>IE9</em> 和 Opera Mini 外<em>的</em>所有主流<em>浏览器</em>。

1.3K10

这个 CSS 库帮你做汉堡?

这不,有个国外大神,专门开发了一个汉堡包菜单 CSS 动画库,库名称就叫 Hamburgers! 进入 Hamburgers 库官网,可以看到各式各样美味 CSS 动画汉堡。...[image-20210425000009512.png] 如何使用 该库使用方式非常简单,由于是纯 CSS 实现,只需引入一个样式文件: <link href="dist/hamburgers.<em>css</em>...再给上述汉堡包元素<em>的</em>最外层(含有 hamburger 类名)添加风格对应<em>的</em>类名,<em>其他</em>子元素保持不变即可。...如果你想要覆盖 Hamburgers <em>的</em>默认<em>样式</em>,只需要给相同<em>的</em>类名写<em>样式</em>覆盖即可,比如控制内边距: hamburger-padding-x: 30px; 此外,Hamburgers 完美支持无障碍编程...--- 最后,看下这个库<em>的</em><em>浏览器</em>兼容性,由于它使用了 <em>CSS</em>3 3D transforms,因此支持<em>除</em> <em>IE9</em> 和 Opera Mini 外<em>的</em>所有主流<em>浏览器</em>。

1.4K31

getComputedStyle与currentStyle

需要注意是在Gecko内核2.0(即Firefox4)之前该参数是必须,对于其他主流浏览器来说该参数非必须,现在Firefox已经与其他浏览器一样将该参数设为optional,所以为了兼容性考虑,在没有匹配伪类情况下...css样式,对于浏览器缺省设置、外部样式表以及内部样式表(位于 标签内部)都输出空字符串,而getComputedStyle会输出最终应用于该element上最终样式,而不管该样式是内联还是外联还是浏览器默认...和getComputedStyle检测结果,如下图所示 4.浏览器兼容性 桌面浏览器 IE9以下版本不支持getComputedStyle方法,恰如上文所说,IE9以下document没有defaultView...获取样式,后者使用getAttribute获取样式; c.getPropertyValue中传入变量不支持驼峰标示,多单词css属性名只能以“-”连接,比如getPropertyValue(“background-color...6.兼容所有浏览器计算样式代码 //将名称转换成驼峰标志形式 function toCamelCase(name){ var result = ""; var words = name.split

92620

网页|CSS继承性

继承是指包含在内部样式标签能够拥有外部标签样式性,即子元素可以继承父元素属性。这种继承性允许样式不仅应用于某个特定元素,同时也应用于其后代,而其后代所定义样式,却不会影响父代样式。...2.继承中容易引起错误 有时候继承也会带来些错误,比如说下面这条CSS定义: body{color:blue} 在有些浏览器中这句定义会使表格之外文本变成蓝色。...因为选择符H1和.apple都匹配上面的H1元素,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这段文字应用了.apple这个样式,所以它显示是红色。...因此,不管一条规则具有多高权重,如果没有其他规则能应用于这个继承元素,那么它也只是个被继承规则而已,举例说明。...所以在设置时候要注意一下选择符优先级。 CSS继承是我们在写CSS样式时最容易出现错误,我们要注意以上一些内容,避免自己样式显示不出来,又找不到问题。

1K10

Web页面中5种超酷Hover效果

原来做法是使用javascript来实现这些动态效果,但是随着CSS3引入和现代浏览器支持,我们可以用纯粹CSS代码来实现这些有趣效果。...实现这个效果是非常容易,但是因为这是一个非常重要效果,尤其对于画廊中缩略图。这个效果中我们使用了一些较新CSS样式。...以上这五个纯CSS实现hover效果,应该会给你带来一些设计上灵感,你可以综合运用这些CSS样式,并加入一些其他CSS来产生一些有意思效果。如果你也有一些非常酷CSS效果,欢迎参与讨论。...编注 以上五种CSS Hover效果都应用了最新CSS3效果,在现代浏览器中,应用这些CSS能展现出非常漂亮效果。...值得一提IE9IE9不支持transition和transform这两种效果,使得这五种效果在IE9下表现不佳,寄希望于IE10吧。

1.6K100

CSS兼容性一些Hack方法

CSS hack方式一:条件注释法 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用hack方式。举例如下 只在IE下生效 这段文字只在IE浏览器显示 CSS hack方式二:类内属性前缀法 属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期页面展现效果。...IE浏览器各版本 CSS hack 对照表 hack 写法 实例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10...是不是有些奇怪:除了IE6以外,其他所有的表现都符合我们期待。那为何IE6表现颜色不是_绿色而是*+background-color:pink粉色呢?...CSS hack方式三:选择器前缀法 选择器前缀法是针对一些页面表现不一致或者需要特殊对待浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

1.1K30

第140天:前端开发中浏览器兼容性问题总结(一)

有了这些最基本要求,在开发中就是要考虑到CSS样式和JavaScript在这些浏览器兼容性了 一、html部分 1.H5新标签在IE9以下浏览器识别 <!...,但是在IE8以上及其他浏览器中有个默认内边距。...解决方法:统一设置ul内外边距为0 二、CSS样式兼容性 1.csshack问题:主要针对IE不同版本,不同浏览器写法不同  IE条件注释hack:  <!...hover和active属性 解决办法:按lvha顺序书写css样式,  ":link": a标签还未被访问状态;  ":visited": a标签已被访问过状态;  ":hover": 鼠标悬停在...中不能操作trinnerHtml 7.获得DOM节点父节点、子节点方式不同 其他浏览器:parentNode  parentNode.childNodes   IE:parentElement

3.1K31

HTML5和CSS3提高

这些新标签页面中可以使用多次 在 IE9 中,需要把这些元素转换为块级元素 其实,我们移动端更喜欢使用这些标签 2.HTML5 新增多媒体标签 新增多媒体标签主要包含两个: 音频: 视频...: 使用它们可以很方便在页面中嵌入音频和视频,而不再去使用 flash 和其他浏览器插件。...其他特性(了解) 图片变模糊: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。...7.CSS3 过渡(重点) 过渡(transition)是CSS3中具有颠覆性特征之一,我们可以在不使用 Flash 动画或 JavaScript 情况下,当元素从一种样式变换为另一种样式时为元素添加效果...过渡动画:是从一个状态 渐渐过渡到另外一个状态 可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响 页面布局。

95040

【转】不同内核浏览器差异以及浏览器渲染简介

IE浏览器不安全观点,也有很多用户转向了其他浏览器,Firefox和Opera就是这个时候兴起。...而在iOS以及WP7平台上,由于系统封闭,不允许系统自带浏览器内核以外浏览器内核进入,因此各家浏览器开发均为在Safari或者IE内核基础上进行二次开发,优化功能和自制UI。...2、构建渲染树(Render tree construction):解析CSS(包括外部CSS文件和样式元素),根据CSS选择器计算出节点样式,创建另一个树 —- 渲染树。...主要流程就是:构建一个dom树,页面要显示各元素都会创建到这个dom树当中,每当一个新元素加入到这个dom树当中,浏览器便会通过css引擎查遍css样式表,找到符合该元素样式规则应用到这个元素上。...注意了:css引擎查找样式表,对每条规则都按从右到左顺序去匹配。 看如下规则: 1 #nav  li {} 看起来很快,实际上很慢,尽管这让人有点费解#_#。

2K10

CSS相对单位

# 相对值优势 CSS 为网页带来了后期绑定(late-binding)样式:直到内容和样式都完成了,二者才会结合起来。这会给设计流程增加复杂性,而这在其他类型图形设计中是不存在。...即不能在刚创建网页时就应用样式,而是等到要将网页渲染到屏幕上时,才能去计算样式。这给 CSS 增加了一个抽象层。...准确地说,medium 关键字值是 16px。 # em 同时用于字号和其他属性 同时用 em 指定一个元素字号和其他属性。这时,浏览器必须先计算字号,然后使用这个计算值去算出其余属性值。...可以用一个无单位数值给 body 设置行高,之后就不用修改了,除非有些地方想要不一样行高。 # 自定义属性(CSS 变量) 可以声明一个变量,为它赋一个值,然后在样式其他地方引用这个值。...学习CSS并不是学习一两个小技巧,而是要理解这门语言方方面面,并知道如何将其搭配使用。

89320

前端面试题-CSS Hack

这时,我们为了获得统一页面效果,就需要针对不同浏览器或不同版本写特定CSS样式。我们把针对不同浏览器/不同版本写相应CSS code过程,叫做CSS hack!...二、CSS Hack原理 由于不同浏览器浏览器各版本对CSS支持及解析结果不一样,以及CSS优先级对浏览器展现效果影响,我们可以据此针对不同浏览器情景来应用不同CSS。...[endif]--> 六、CSS Hack 类内部属性前缀法 属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀,以达到预期页面展现效果。...6.1 IE浏览器各版本 CSS hack 对照表 hack 写法 实例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S)...IE7 / IE8 / IE9 / IE10 都生效 (3)“ \0 ″ IE8 / IE9 / IE10 都生效 (4)“ \9\0 ″ IE9 / IE10 生效 七、CSS Hack 选择器前缀法

70540

CSS笔记(21)

CSS3盒子模型 CSS可通过box-sizing来指定盒子模型,有2个值:即可指定为content-box,border-box,这样我们计算盒子大小方式就发生了改变....值和padding值 CSS3其他特性(了解) 图片变模糊 计算盒子宽度:width:calc函数 1.CSS3滤镜: filter CSS属性将模糊或颜色偏移等图形效果应用于元素....举个例子: width:calc(100%-30px); 它意思就是盒子宽度永远比父盒子宽度小30px,括号里可以使用+-*/来进行计算,但是注意运算符之间一定要有空格!!!...CSS3过渡(重点) 过渡(transition)是CSS3中具有颠覆性特征之一,我们可以在不适用flash动画或JavaScript情况下,当元素从一种样式转变成另一种样式时为元素添加效果....可以让我们页面更加好看,更动感,虽然低版本浏览器不支持(ie9以下版本),但是不会影响页面布局 我们现在经常和:hover一起使用.

22210
领券