如何编写只在非IE、非Edge浏览器中有效的CSS？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

2.9K1 0

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

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

4043 0

您找到你想要的搜索结果了吗？

是的

没有找到

浏览器内核（理解）

渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。...内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。 ...（1）Trident(IE内核) 　　国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。　　...Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。...) 　　在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。

2.9K3 0

CSS和网络性能

基本上，浏览器有效地延迟了不需要渲染当前视图的任何CSS。...本节介绍WebKit和Blink的Preload Scanner中的错误，以及Firefox和IE / Edge的Preload Scanner中的低效率。...Firefox和IE / Edge：将@import放在HTML中的JS和CSS之前在Firefox和IE / Edge中，Preload Scanner似乎没有使用或...由于无效预装载扫描程序导致Firefox失去并行化（N.B.在IE / Edge中出现相同的瀑布。）...在CSS之前放置任何非CSSOM查询JavaScript; 在CSS之后放置任何CSSOM查询JavaScript 更进一步，除了异步加载片段之外，我们应该如何更普适地加载CSS和JavaScript？

1.3K3 0

WinForm嵌入Web网页的解决方案

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

4.6K1 1

JS魔法堂：浏览器模式和文档模式怎么玩？

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

2K8 0

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

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

4.6K1 0

前端翻译：Activating Browser Modes with Doctype

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

9807 0

浏览器

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

2.8K2 0

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

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

3K1 1

【网页前端】HTML基础入门以及概述

本期介绍本期主要介绍HTML基础入门以及概述文章目录 1.HTML概述 1.1网页概述(了解) 1.1.1什么是网页 1.1.2网页是如何编写的 1.2浏览器概述(了解) 1.2.1常见浏览器 1.2.2...1.1.2网页是如何编写的开发人员编写网页内容，然后通过浏览器处理后，就形成了多姿多彩的网络世界。...Edge 浏览器，那么还有其他浏览器吗？...、链接等非文字内容。...例如字符集、引入 css 样式，引入 JavaScript 功能等。向用户展示的信息不建议放入 head 中。

4241 0

不要让 Chrome 成为下一个 IE！

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

6021 0

前端-CSS与网络性能

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

9952 0

近一年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.4K2 0

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

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

2K1 0

当代 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.4K6 0

各大浏览器 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.6K13 0

JS相关概念

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

1.6K2 0

【小程序_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.4K2 0

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

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

5352 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭