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

如何编写只在非IE、非Edge浏览器中有效的CSS?

要编写只在非IE、非Edge浏览器中有效的CSS,可以使用CSS的@supports规则和媒体查询来实现。

  1. 使用@supports规则: @supports规则用于检测浏览器是否支持某个CSS属性或属性值。通过在@supports规则中设置不支持IE和Edge浏览器的条件,可以编写只在非IE、非Edge浏览器中有效的CSS。

示例代码:

代码语言:txt
复制
@supports not (-ms-ime-align: auto) and (not (-ms-accelerator: true)) {
  /* 在非IE、非Edge浏览器中生效的CSS样式 */
}
  1. 使用媒体查询: 媒体查询可以根据不同的设备或浏览器特性应用不同的CSS样式。通过设置媒体查询条件,可以编写只在非IE、非Edge浏览器中有效的CSS。

示例代码:

代码语言:txt
复制
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    /* 在非IE、非Edge浏览器中生效的CSS样式 */
  }
}

这样编写的CSS样式只会在非IE、非Edge浏览器中生效,对于其他浏览器则不会应用这些样式。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发:https://cloud.tencent.com/product/mobdev
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/product/mu
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

4种方案解决CSS浏览器兼容性问题

Chrome,Frirefox,Safari,EdgeIE6,IE7,IE8,IE9...360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon(傲游)…… 关键是不同厂商,甚至同一厂商不同版本...浏览器CSS样式初始化 由于每个浏览器css默认样式不尽相同,所以最简单有效方式就是对其进行初始化,相信很多朋友都写过这样代码,在所有CSS开始前,先把marin和padding都设为0,以防不同浏览器显示效果不一样...version IE浏览器版本,如6、7、8 IE10及以上版本已将条件注释特性移除,使用时需注意。 举例 你IE中将看不到我身影 <!...诸如:(+)与(#)之类均可使用,不过业界对()认知度更高 \9:选择IE6+ \0:选择IE8+和Opera15以下浏览器 举例 如在不同IE浏览器设置不同颜色,注意顺序:低版本兼容性写法放到最后..._color: #ff0; /* For IE6 and earlier */ } 选择符级hack 选择符级hack是针对一些页面表现不一致或者需要特殊对待浏览器CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行

2.7K10

微软亲手盖上IE棺材板:明年6月停用,慢且不安全,还因垄断被罚款170亿

贾浩楠 发自 凹寺 量子位 报道 | 公众号 QbitAI 「快别用IE浏览器了,求求了!」 这话还真是微软2019年苦口婆心劝用户时说。...Win10上Edge浏览器,暂时会保留内置IE模式,作为桌面AppIE,将被删除。 此外,微软 Office 365 将于 2021 年 8 月 17 日后停止支持 IE 11 浏览器。...互联网优化,网络安全威胁也持续发展,IE给了又慢又不安全印象。 ? 更糟糕是微软让换浏览器变成了难事。他们将IE紧密集成Windows系统,卸载非常困难,把之前积攒大部分用户好感毁了。...虽然IE继续坚持了几年,但在2015年占有率终于跌破20%,微软也用基于ChromiumEdge浏览器取代了IEEdge渲染引擎除去了所有IE老代码。 ?...但微软一句停用,带来麻烦却不少,对于中国用户来说尤其如此。 消息一出,不少中国用户都指出,中国,就有不少企事业单位、政府、银行网站仍然支持IE浏览器。 ?

39630
  • WinForm嵌入Web网页解决方案

    所以,通常所谓浏览器内核也就是浏览器所采用渲染引擎,渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息。...不同浏览器内核对网页编写语法解释也有不同,因此同一网页不同内核浏览器渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核浏览器测试网页显示效果原因。...默认基于IE7内核,对H5网页加载支持不完善。 支持单线程模式,大部分对其操作必须在创建它线程执行,不可以在其它线程调用其方法或属性。 性能相对较弱。...WebView2 Microsoft Edge WebView2 控件允许本机应用嵌入 web 技术(HTML、CSS 以及 JavaScript)。...WebView2 控件使用 Microsoft Edge(Chromium) 作为绘制引擎,以本机应用显示 web 内容。

    4.5K11

    JS魔法堂:浏览器模式和文档模式怎么玩?

    一、前言                                         从IE8开始引入了文档兼容模式概念,作为开发人员我们可以开发人员工具通过“浏览器模式”和“文档模式”(IE11...标准模式(怪异模式)     W3C标准文档模式,但各浏览器实现阶段不尽相同。   3....IE11IE=10和IE=EmulateIE10是一样IE=11、IE=EmulateIE11和IE=Edge是一样;      2017/03/29,由于document compatibility...mode仅在IE8/9/10生效,因此IE11时设置是无效,只有开发工具设置才有效果。      ...其实我们只要再次明确一下“文档兼容性模式”目的就好了,对终端用户来讲它是为了新版IE尽量正确地显示老网站;对开发者来讲它是为了方便调试新网站在旧版IE显示效果和JS有效性,极端情况下会通过锁定文档模式来启用旧技术

    1.9K80

    C#开发BIMFACE系列52 CS客户端集成BIMFACE应用技术方案

    所以,通常所谓浏览器内核也就是浏览器所采用渲染引擎,渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息。...不同浏览器内核对网页编写语法解释也有不同,因此同一网页不同内核浏览器渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核浏览器测试网页显示效果原因。...默认基于IE7内核,对H5网页加载支持不完善。 支持单线程模式,大部分对其操作必须在创建它线程执行,不可以在其它线程调用其方法或属性。 性能相对较弱。...WebView2【推荐】 Microsoft Edge WebView2 控件允许本机应用嵌入 web 技术(HTML、CSS 以及 JavaScript)。...WebView2 控件使用 Microsoft Edge(Chromium) 作为绘制引擎,以本机应用显示 web 内容。

    4.6K10

    前端翻译:Activating Browser Modes with Doctype

    并使用知名浏览器来代表各款内核描述模式转换。     本文重点讲解模式选择机制而不是各种模式对应 行为特征。目的是让大家理解如何避免陈旧模式,当然也不是旨在促进大家采用更良好模式了。...例如,IE10下使用IE9模式处理@font-face类 EOT 字体时和真实IE9是不同,前者由于IE10开始支持CSS 2D转换,因此CSS属性就不用带-ms-前缀,而后者就需要-ms-前缀了...模式作用 布局         除了IE,text/html模式主要影响CSS布局和样式系统。例如,table没有样式继承是怪异模式特性。...例如,有些对于HTMLbody元素规则在那些没有实现CSS新规范浏览器中将失效。 解析         怪异模式下,会导致符合W3C标准页面的HTML和CSS解析出错。...下面是简单教程,告诉已经通过doctype触发标准模式情况下,如何选择X-UA-CompatibleHTTP头或meta元素了。     1.

    94770

    浏览器

    渲染引擎 它负责取得网页内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页显示方式,然后会输出至显示器或打印机。...内核种类很多,如加上没什么人使用商业免费内核,可能会有10多种,但是常见浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。...Window10 发布后,IE 将其内置浏览器命名为 EdgeEdge 最显著特点就是新内核 EdgeHTML。...(2)Gecko(firefox) Gecko(Firefox 内核): Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 特点是代码完全公开,因此,其可开发程度很高,全世界程序员都可以为其编写代码...) Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。

    2.6K20

    .NET桌面程序集成Web网页开发十种解决方案

    所以,通常所谓浏览器内核也就是浏览器所采用渲染引擎,渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息。...不同浏览器内核对网页编写语法解释也有不同,因此同一网页不同内核浏览器渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核浏览器测试网页显示效果原因。...支持单线程模式,大部分对其操作必须在创建它线程执行,不可以在其它线程调用其方法或属性。 性能相对较弱。...控件3:Microsoft Edge WebView2【强烈推荐】 Microsoft Edge WebView2 控件允许本机应用嵌入 web 技术(HTML、CSS 以及 JavaScript...WebView2 控件使用 Microsoft Edge(Chromium) 作为绘制引擎,以本机应用显示 web 内容。

    2.9K11

    不要让 Chrome 成为下一个 IE

    当整个网络都以某一个浏览器引擎为标准时,那么开发人员很可能就会忽略其他浏览器针对主流浏览器支持 CSS 和 JavaScript 功能集,而不会考虑在其他浏览器测试交叉兼容性——且事实不止于此!...我们主要顾虑在于:如果一个浏览器占据绝对主导地位,那么开发人员可能会忽略其他浏览器针对主流浏览器支持CSS和JavaScript功能集,而不会考虑在其他浏览器测试交叉兼容性。...这并非毫无根据,二十一世纪初,浏览器大战高峰时期就发生了这样事情:Internet Explorer占据了绝对主导地位,开发人员经常编写专门针对IE浏览器功能,许多网站根本无法在任何其他浏览器运行...我认为最近Mozilla与Quantum一起做了一件了不起事情,而且他们经常负责实施新网络平台功能,特别是CSS(subgrid !!!)。...我希望,如今开发人员花费了无数时间各自代码库并行编写相同代码,如果将他们统一到同一个代码库,不是更好吗? 理想情况下,这个代码库不归任何一家公司控制。

    59510

    前端-CSS与网络性能

    HTML 中使用 @import,以 WebKit 与 Blink 为内核浏览器,可能会触发它们预加载扫描器 bug, Firefox 与 IE/Edge ,则表现低效。...Firefox 与 IE / Edge HTML 中将 @import 放在 JS 和 CSS 之前 Firefox 与 IE/Edge ,预加载扫描器不会并行下载 <script src="...由于预加载扫描器失效,导致资源<em>在</em> Firefox <em>中</em>无法并行下载(<em>IE</em>/<em>Edge</em> 中有着同样<em>的</em>问题)。...<em>浏览器</em>并行下载资源,<em>IE</em>/<em>Edge</em> 表现相同。 以 Blink 或 WebKit 内核<em>的</em><em>浏览器</em>:<em>在</em> HTML 文档中使用 @import 时,要用引号包裹 url。...然而,这现象<em>在</em> Chrome (v69)<em>中</em>得到缓解,Firefox 与 <em>IE</em>/<em>Edge</em> 也已经进行了相关<em>的</em>优化。

    98720

    近一年web前端经典面试题整理

    这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。   2.使用after伪对象清除浮动  该方法适用于IE浏览器。具体写法可参照以下示例。...这种方式产生效果就像元素完全不存在;   Position:不会影响布局,能让元素保持可以操作;   Clip-path:clip-path 属性还没有 IE 或者 Edge 下被完全支持。...2、cookie有path概念,子路径可以访问父路径cookie,父路径不可以访问子路径cookie。   3、有效期: cookie设置有效期内有效,默认为浏览器关闭消失。...1.display:none是彻底消失,不在文档流占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0效果, 文档流占位,浏览器会解析该元素;...表示层:css ,作用:由 CSS 负责创建,CSS对“如何显示有关内容”问题做出了回答。 行为层:js,作用:负责回答“内容应该如何对事件做出反应”这一问题。

    1.3K20

    【转】http-equiv=X-UA-Compatible 设置IE浏览器兼容模式详解

    DOCTYPE>支持两种兼容性模式,受到影响网站拥有者被迫更新他们网站使其能支持IE7。 IE8 比之前任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计网页可能无法如预期般呈现。...为了帮助减轻所有问题,IE8引入文件兼容性概念,使 你能选择你网页设计要对应特定IE版本。文件兼容性IE8增加了一些新模式,这些模式能告诉浏览器如何解析和编译一个网页。...若你网页无法 ie8正确显示,你可以更新你网站使它支持最新网页标准(优先选项)或在你页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你页面。...由于edge mode使用该IE版本所能支持最高模式来显示所浏览网页内容,建议仅使用于测试页及其他商用页面。...选择支持某个特定版本IE,你可以确保你页面未来浏览器版本也能有显示一致性。

    2K10

    当代 Web JSON 劫持技巧

    这个问题在 FireFox 浏览器似乎被修复了,但是我发现了一种对 Edge 进行攻击新方式。虽然 Edge 好像是阻止分配 window....-- script contains: stealme --> Edge PoC stealing undefined variable 如果你跨域脚本包含 stealme,你将会看到浏览器弹出了该值警告...或许它在进行一些字符编码扫描,亦或是截断相应和 NULL 后面的字符 Edge 上不是一个有效 JS 变量。我不确定,但是测试,似乎需要一个 NULL 与其他一些填充字符。...我相信浏览器厂商能够更有效地做到这一点。 CSS 你可能认为这种技术可以应用于 CSS,在理论上是可以,因为任何 HTML 将被转换为 ASCII 无效 CSS 选择器。...Edge,Firefox 和 IE 标准模式下似乎也会检查 mime 类型,Chrome 说样式表被解析了,但至少测试并不会这样。

    2.4K60

    各大浏览器 CSS Hack 收集

    可以识别,所以此样式IE6实际设置对象宽度为200px,后面的把前面的给覆盖了,而其他浏览器不识别_width不会执行_width:200px;这句样式,所以在其他浏览器设置对象宽度就是300px...由于各浏览器内核不同,所以会造成一些误差就像JS一样,一个JS网页特效,微软IE6、IE7、IE8浏览器有效果,但可能在火狐(Mozilla Firefox)谷歌浏览器无效,这样就叫做JS hack...2、CSS hack解决问题 CSS hack用来解决有些css属性不同浏览器显示效果不一样问题,如margin属性ie6显示距离会比其他浏览器显示距离宽2倍,也就是说margin-left...:20px;ie6距左侧对象实际显示距离是40px,而在ie6显示距左侧对象距离是设置值20px;所以要想设置一个对象距离左侧对象距离在所有浏览器中都显示是20px宽度样式应为:....系列浏览器可读「9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和IE浏览器

    1.6K130

    JS相关概念

    1、CSS和JS在网页放置顺序是怎样? (1)CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是全部样式表完全加载下来之后才开始渲染页面,将内容呈现在页面上。...而body标签则不阻塞任何内容显示,会出现FOUC无样式内容闪烁。 对于IE/Edge。...导致白屏原因: 样式文件放在底部,对于IE浏览器某些场景下(新窗口打开,刷新等)页面会出现白屏 使用 @import 标签, 即使 CSS 放入 link, 并且放在头部,也可能出现白屏 把 JavaScript...放入页面顶部也会导致白屏现象,加载 JavaScript 时,会禁用并发,并且阻止其他内容下载 导致FOUC原因 : 把样式放在底部,对于IE浏览器,某些场景下(点击链接,输入URL,使用书签进入等...然后从实用角度来说呢,首先把所有脚本都丢到 之前是最佳实践,因为对于旧浏览器来说这是唯一优化选择,此法可保证脚本其他一切元素能够以最快速度得到加载和解析。

    1.6K20

    2 分钟搞定 3 个现代 CSS 特性

    上例有一个靠近右下角点,但没有完全在下面(只是 85%),就组成了一个对角线效果。 Clip paths 平面设计特别流行,用来创建倾斜区域(跟上例效果一样)。...我个人网站 xtrp.io上使用它,来吸引用户注意某些页面上背景图像。 基本 clip-path 属性,已经可以在所有的主流浏览器中使用了(除了 EdgeIE)。...你可以创建自己 Clip paths,或者你可以使用像 Clippy 这样工具自动生成 CSS Clip paths 代码。...混合模式可以在所有的 EdgeIE 主流浏览器中使用。查看 CanIUse 数据。 CSS Filters CSS 提供了大量滤镜效果函数。 例如: ?...例如,我们可以使用 invert 过滤函数实现网站暗色模式。 filter 属性可以在所有的 IE 主流浏览器中使用。查看 CanIUse 数据。

    52520

    【小程序_02】布局方式

    标准viewport设置,使用倍图来提高图片质量,解决高清设备模糊问题。...盒子模型: 盒子宽度 = CSS设置宽度width 里面包含了 border 和 padding CSS 添加以下属性改变盒子模型 /*CSS3盒子模型*/ box-sizing: border-box...2.5 align-content(设置侧轴上子元素排列方式【多行】 ) 设置子项侧轴上排列方式 并且只能用于子项出现 换行 情况(多行),单行下是没有效 属性 说明 flex-start...CSS 没有很好计算能力 前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护 CSS 代码项目。...它在CSS 语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 编写,并且降低了 CSS维护成本,就像它名称所说那样,Less可以让我们用更少代码做更多事情

    1.3K20
    领券