开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何修复在Edge上运行良好但在IE上不起作用的CSS

在Edge上运行良好但在IE上不起作用的CSS问题，可以通过以下几个步骤来修复：

使用IE兼容的CSS属性和语法：IE对一些CSS属性和语法的支持不如现代浏览器，因此需要使用特定的兼容性写法。例如，使用-ms前缀来指定IE的特定样式，或者使用IE的条件注释来加载特定的CSS文件。
检查CSS选择器的兼容性：某些CSS选择器在IE中可能不被支持，导致样式无法生效。可以通过查阅IE的官方文档或者Can I use等网站来了解IE对于各种选择器的支持情况，并根据需要进行调整。
避免使用CSS3新特性：一些CSS3的新特性在IE中可能不被支持，例如圆角、阴影、渐变等效果。可以考虑使用图片代替这些效果，或者使用IE的滤镜属性来模拟。
使用IE的条件注释：IE支持条件注释，可以根据IE的版本加载特定的CSS文件。通过使用条件注释，可以为不同版本的IE提供不同的样式，从而解决兼容性问题。
使用CSS Hack：在某些情况下，可以使用CSS Hack来针对IE的特定版本进行样式修复。但是需要注意的是，CSS Hack可能会导致代码的可读性和可维护性下降，因此应该谨慎使用。

总结起来，修复在Edge上运行良好但在IE上不起作用的CSS问题，需要使用IE兼容的CSS属性和语法，检查CSS选择器的兼容性，避免使用CSS3新特性，使用IE的条件注释，以及在必要时使用CSS Hack。通过这些方法，可以提高在IE上的兼容性，确保CSS在各个浏览器中都能正常运行。

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

腾讯云CDN：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云安全中心：https://cloud.tencent.com/product/ssc
腾讯云人工智能平台：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动推送：https://cloud.tencent.com/product/tpns
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc

相关搜索:CSS在桌面和安卓上的chrome上运行良好，但在safari上不起作用 Glassfish取消部署在Windows上不起作用，但在Linux上运行良好使用require导入，在windows上运行良好，但在ubuntu上不起作用 jQuery更改事件在PC上运行良好，但在iOS上不起作用垂直对齐在Chrome上运行良好，但在Firefox上不起作用垂直滚动在iOS上不起作用，但在安卓上运行良好 scrapy脚本在shell中运行良好，但在crawler上不起作用 Javascript在edge中不起作用，但在Firefox和Chrome中运行良好外部CSS在Edge 2017 build和IE11上不起作用 Django -图像滚动功能在localhost上不起作用，但在127.0.0.1上运行良好 CSS可以在chrome上运行，但不能在edge 40.15063.0.0和ie11上运行。带有文本阴影延迟的Firefox，在Chrome/Edge上运行良好在google colab上运行的简单代码，但在kaggle上不起作用 Flutter手机身份验证在模拟器上运行良好，但在真实设备(Android)上不起作用如何在Windows的IE、Edge或Firefox上运行Intern 4？我的应用程序在我的真实设备上运行良好，但在模拟器和其他设备上不起作用如何在IE11中修复列表卡?图片很大(css Grid) Crhome，Safari运行良好 Javascript代码在IE11上不起作用，但在所有其他浏览器上都能起作用伪元素之前和之后的CSS在Edge和IE 11中不起作用如何修复在codesandbox上不起作用的svg图标

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Edge浏览器兼容性问题如何修复，这篇文章告诉你

前言现在使用Edge浏览器的人越来越多，我们在使用edge浏览器时也可能会遇到这样那样的问题，其中我们就有可能会遇到兼容性的问题，如下图：本文我们就来介绍一下，如何解决edge浏览器的兼容性问题。...方法1：更改Edge的兼容性视图设置如果问题是由于网站不适应新版Edge的HTML/CSS/JavaScript标准导致的，可以通过以下步骤调整兼容性视图设置：打开Microsoft Edge浏览器，访问出现问题的网站...方法2：使用IE模式浏览对于仅兼容旧版IE的网站，Edge浏览器内置了IE模式。打开Edge浏览器设置，寻找与“IE模式”相关的设置选项，启用并配置需要使用IE模式的网站列表。...方法3：更新Edge浏览器确保Edge浏览器版本是最新的，因为许多兼容性问题会在后续版本中得到修复。可以通过设置菜单检查并更新浏览器。...总结解决过期程序与Edge浏览器的兼容性问题需要开发人员及时更新程序并使用最新的技术和工具。通过遵循本文提供的解决方案，我们可以确保我们的程序在Edge浏览器中顺利运行，提供更好的用户体验。

6851 0

CSS和网络性能

在这篇文章中，我想看看CSS如何证明是网络上的一个重大瓶颈（本身和其他资源）以及我们如何缓解它，从而缩短关键路径并缩短开始渲染的时间。...Firefox和IE / Edge：将@import放在HTML中的JS和CSS之前在Firefox和IE / Edge中，Preload Scanner似乎没有使用或...由于无效预装载扫描程序导致Firefox失去并行化（N.B.在IE / Edge中出现相同的瀑布。）...IE / Edge中出现相同的瀑布。）...虽然这在理论上都是正确的，但在实践中事情总是有所不同。套用中国的一句老话，实践出真知啊。

1.3K3 0

前端翻译：Activating Browser Modes with Doctype

本文重点讲解模式选择的机制而不是各种模式对应的行为特征。目的是让大家理解如何避免陈旧的模式，当然也不是旨在促进大家采用更良好的模式了。...我没有在塞班自带的浏览器上测试过，也没有在Konqueror上作充分地测试，所以不敢保证其准确的行为模式。...模式的作用布局除了IE，text/html的模式主要影响CSS布局和样式系统。例如，table中没有样式继承是怪异模式的特性。...当你通过模拟器在个版本的IE上测试时，模式对脚本的影响会明显。 ...下面是简单的教程，告诉在已经通过doctype触发标准模式的情况下，如何选择X-UA-Compatible的HTTP头或meta元素了。 1.

9557 0

IE 浏览器已“死”，一个时代的终结

IE 的增量改进无法与整个 Web 的普遍改进相匹配，因此微软重新开始——推出 Microsoft Edge。事实上，IE 浏览器也会继续以“IE 模式”存在于 Edge 浏览器。...但在 20 年前，IE 可是风靡全球的王者浏览器，1995 年，微软发布 Windows 95 操作系统，这也是微软史上最成功的操作系统之一。...2 Chrome、Firefox 异军突起，IE 辉煌不再在 IE 疲劳于修复 bug 无暇专注改善用户体验与功能更新的同时，Firefox 和 Chrome 慢慢展开了与 IE 的竞争。...用户仍会在自己的设备上看到 IE 浏览器的图标（例如在任务栏上或开始菜单中），但如果他们点击打开 IE 浏览器，Edge 浏览器就会被打开并进入 IE 模式。...无论如何，IE 浏览器始终是许多人的第一个浏览器，尽管它往往也是最差的那个。就连微软 Edge 浏览器官方微博都忍不住调侃，“如今比起 IE 本身，更火的可能是黑 IE 的 meme（梗图）”。

4951 0

为什么我对JavaScript的未来持乐观态度？

的死亡：现在，IE 11 已正式退役，Web 开发人员可以编写更少的特定于供应商的 CSS，从而使样式表更小，hack 更少。...但这是目前最好的，我很乐观。由于不需要花一周的时间去研究深奥的IE错误，数千（或数百万）的开发者时间将被累计节省。下面是一个例子，说明这种排列组合如何使所有的 web 开发者受益。...想象一下，你是一个框架的作者，试图编写一个可重复使用的图像组件，以帮助成千上万的开发人员在使用图像时获得良好的性能。在2020年，就在几年前，你需要围绕 web 平台开展工作。...在客户端和服务器上都可以运行的同构 JavaScript（即可以在客户端和服务器上运行的代码）一直是许多 Web 开发人员的理想状态。...JavaScript: 在 Edge 中 Edge computing，这种常常被误解的最新运行 JavaScript 的目标，在三个（浏览器、服务器、edge）中标准化最少。

9083 0

常见的几种 CSS 水平垂直居中解决办法

，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个元素： html,body,div {margin: 0;padding:...图片的居中也同理。 ? ? 四、IE6下的解决方案 IE6这么霸道..不过还是可以以bug攻bug 在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。...六、css3中transform的使用其实这种方式给负边距差不多，原理也是拉回来，不过因为css3的关系，IE8以下（包括IE8）还不支持使用 transform: translate(-50%,-...3.在Windows Phone设备上不起作用。浏览器兼容性： Chrome,Firefox, Safari, Mobile Safari, IE8-10....绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

1.2K1 0

IE之页面加载慢.

然后把base64编码写在dom里的实现方式改成了css加载src. 改完之后, 后台已经完全不涉及到读写图片卡顿问题了....IE与Gzip 如果不是图片导致的加载慢, 为什么很多小伙伴反馈大屏慢呢? IE以及Edge似乎更卡一点. 我们用Chrome访问一张大屏模板, 对比下IE访问模板的响应时间....op=fs_main&cmd=entry_report&id=2571 截图一看清楚了, IE里看上去Gzip就没起作用, 实实在在的加载原js. 用了4s才加载完....("edge"); 8 } 实际上高版本IE早就支持Gzip了, 因为IE11里http的响应头已经写了Accept-Encoding: gzip, deflate....找了早期的IE9看了下, 也是支持Gzip压缩的. 修复验证因为是线上环境, 我们本地没还原客户那边的卡顿很久空白的情况, 猜测跟网速有关系. 需要用一个软件来模拟低速网络环境,.

2.4K7 0

GitHub 和 Twitter 都在用的 CSS 库

简介不同浏览器对于同一个元素会有不一样的默认样式，normalize.css 采用和平且高效的方式，解决了浏览器默认样式的问题，尽可能让同一个 CSS 文件在不同的浏览器上显示一样的效果。...主要作用：与许多 CSS reset 不同，保留有用的默认值，而非删除它们。标准化各种元素的样式。纠正错误和常见的浏览器不一致问题。通过细微的修改提高可用性。使用详细注释解释代码的作用。...Chrome Edge Firefox ESR+ IE 10+ Safari 8+ Opera 项目地址是： github.com/necolas/nor… 下载安装 npm npm install -.../latest/normalize.css 简单使用 normalize.css 修复了 CSS reset 范围之外的常见桌面和移动浏览器错误。...包括 HTML5 元素的显示设置、更正 font-size 预格式文本、IE9 中的 SVG 溢出以及跨浏览器和操作系统的许多与表单相关的错误。

571 0

Angularjs SPA开发的一些经验分享

是属于经典MVC模式，但在1.0把scope独立注入过后，更倾向于MVVM模式，这将会后续随笔中写道）简化前端开发和使得前端业务逻辑得以分离，view和表现逻辑的分离，更便于维护，扩展。...3：注意一些特殊的节点式的angularjs directive，因为在IE7上这是不被认识的，因为IE的严格XML模式。...这会导致逻辑的混杂耦合，对于angularjs自身的绑定对html操作，很多时候你会分不清是view的影响源，导致修复bug，和新增功能，重构的艰难，常常出现很多的诡异行为。...最好的实践模式则是把必须的dom，css操作移向angular的Directive，或者view中。在angularjs模式中只有directive和view才能出现dom和css的逻辑操作。 ...14：angularjs的的模块管理参见如何组织大型JavaScript应用中的代码？.

1.3K1 0

Wave-Share -无服务器，点对点，通过声音共享本地文件

正文字数：1807 阅读时长：3分钟这是一个有关于使用声音的WebRTC信号的概念验证。适用于所有有麦克风+扬声器的设备。在浏览器中运行。...运行compile.sh 脚本。 CLI工具 wave-share 这是一个简单的工具，使用 wave-share共享tx/rx协议接收和发送数据。在标准输入上键入一些文本，然后按Enter键发送。.../wave-share 下面是一个演示如何使用CLI工具的短片：https://youtu.be/TcfjCMCyqF0 已知的问题/需要改进的东西不适用于:IE、IE Edge、iOS上的Chrome.../Firefox、macOS上的Safari 超声波传输在大多数设备上不起作用。...需要用纯JS重写在移动设备上，使用Firefox，即使在关闭选项卡后，页面仍可以在后台运行

1.8K2 0

angular浏览器兼容性问题解决方案

问题：edge浏览器下，固定列的边框消失原因：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签： position: -webkit-sticky...important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。...Edge浏览器在1703之后的版本使用了chromium内核，对css3的属性支持较好，也支持sticky属性，可以使用，可以固定表格列，但边框会消失。...比如在placeholder改变时，placeholder的文字不是英语的时候就会触发，Edge15+修复了这个问题，但是IE可能永远都不会修复这个问题。...，插件需要自己添加到项目文件中（根据angular团队所说，这个插件修复了一个IE10或者IE11的bug，但是提交了太多的代码，这会给增加现有的应用的打包体积，虽然后面关于这个PR讨论了挺久，但是看样子是准备把这个放到

3K3 0

当代 Web 的 JSON 劫持技巧

这个问题在 FireFox 浏览器中似乎被修复了，但是我发现了一种对 Edge 进行攻击的新方式。虽然 Edge 好像是阻止分配 window....或许它在进行一些字符编码的扫描，亦或是截断相应和 NULL 后面的字符在 Edge 上不是一个有效的 JS 变量。我不确定，但是在我的测试中，似乎需要一个 NULL 与其他一些填充字符。...IE 上，当检查 isNaN 时 window.external 将会抛出一个异常。...CSS 你可能认为这种技术可以应用于 CSS，在理论上是可以的，因为任何 HTML 将被转换为非 ASCII 的无效 CSS 选择器。...Edge，Firefox 和 IE 在标准模式下似乎也会检查 mime 类型，Chrome 说样式表被解析了，但至少在我的测试中并不会这样。

2.4K6 0

IE支持而Firefox不支持的CSS属性

今天，居然发现了一个IE支持，而Firefox确不支持的CSS属性。....peopleBox a { text-indent:-999px; } 测试的时候，发现IE下表现良好，但是Firefox确无动于衷。...一直以来，从小到大，思想里从来不会出现这样的情形，所以当时确实是大吃一惊。...The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box...原来只对块级元素起作用，而且只是第一行。看来这些东西记得还是不是很牢固参考资料： 1、W3C

8882 0

Bootstrap 响应式框架第二集

：指定用哪个IE的内核来进行页面的渲染 2、IE=edge 指定渲染页面的IE浏览器的内核 IE=6 : 指定使用...IE6的内核来渲染页面在高于IE6(包含)的浏览器中，统一都使用IE6内核渲染在低于IE6的浏览器中，使用当前浏览器中最高版本的内核进行渲染...IE=11 IE=edge 4、引入 bootstrap.css 5、引入两个兼容性 JS 文件作用：让老版本的IE(IE8及以下) 支持 H5的新标记以及 C3 媒体查询技术 1、html5shiv.min.js...class 1、定宽容器在不同宽度大小的设备上均提供了固定的宽度值类：.containe lg :

2.6K3 0

27 年 IE 终落幕，再见 IE，你好 Edge

但在 20 年前，IE 可是风靡全球的王者浏览器，1995 年，微软发布 Windows 95 操作系统，这也是微软史上最成功的操作系统之一。...IE 逐渐衰落就在 IE 如日中天的时候，衰落已初见端倪。2001 年，微软发布 Windows XP 操作系统，不夸张的说这应该是世界上最流行的操作系统。...由于 IE6 存在较多问题，微软陆陆续续推出了多次修复升级补丁，但是直到五六年之后，微软才推出了新的 IE7，不过移动互联网的兴起加上竞争对手的步步蚕食，此时的浏览器市场已经不再是 IE 一家独大了。...3 Chrome、Firefox 异军突起，IE 辉煌不再在 IE 疲劳于修复 bug 无暇专注改善用户体验与功能更新的同时，Firefox 和 Chrome 慢慢展开了与 IE 的竞争。...4 新 Edge 获好评，但路还很长在 IE 不堪大用的同时，微软决定使用 Edge 取代 IE，但最初使用 EdgeHTML 的 Edge 体验并不算优秀，在 Chromium 内核占主导的浏览器市场

5343 0

WordPress主题开发基础：Body 类指南

您是一位有抱负的WordPress主题设计师吗，正在寻找在主题中使用CSS的新方法？幸运的是，WordPress会自动添加您可以在主题中使用的CSS类。...在向您展示特定用例场景之前，我们将向您展示如何使用过滤器添加body类，以便每个人都可以在同一页面上。...在文章编辑屏幕上，您会在右侧列中找到一个名为“文章类（Post Classes）”的新元框。...在文章编辑屏幕上，您会在右侧列中找到一个名为“文章类（Post Classes）”的新元框。单击以添加您的自定义CSS类。您可以添加多个由空格分隔的类。完成后，您只需保存或发布您的文章即可。...现在，该插件会将您的自定义CSS类添加到该特定文章或页面的body类。在Body类上使用条件标签当body_class函数与条件标签一起使用时，它才真正发挥作用。

2.1K2 0

rem适配布局

rem 作用于非根元素字体大小时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其初始字体的大小。...and：相当于”且”的意思，即当媒体类型和媒体特性都符合条件才起作用； not：相当于”非”的意思，排除某个媒体类型，可以省略 only：指定某个特定的媒体类型，可以省略媒体特性每个媒体类型都具有不同的特性...> 2 less CSS 弊端 CSS 是非程序是语言，没有变量、函数、作用域等概念。...需要大量看似没有逻辑的代码，CSS 冗余度较高不方便维护及扩展，不利于复用没有良好的计算能力介绍 Less（Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，成为 CSS...常见的 CSS 预处理器： Sass、Less、Stylus Less 作为 CSS 一种形式上的扩展，没有减少 CSS 的功能，而是在现有的 CSS 语法上，加入程序式语言的特性。

1.4K3 0

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

IE=8″ /> 二.设定网站服务器以指定预设兼容性模式如果服务器是自己的话，可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。...，支持更多的W3C标准，支持CSS2、CSS3选择器。...它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示。使IE5,IE6兼容到IE7模式（推荐） <!...)无法起到任何作用,默认会占满整个容器。...这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

4K2 0

浏览器兼容

让哪些浏览器支持哪些效果 3、如何做（1）根据兼容需求选择技术框架/库(jquery) （2）根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css...[endif]--> 使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。...: yellow\9; /*ie/edge 6-8*/ } 选择器前缀法(即选择器Hack) IE条件注释法(即HTML条件注释Hack) 针对所有IE(注：IE10+已经不再支持条件注释)： IE浏览器显示的内容 ; 针对IE6及以下版本：只在IE6-显示的内容。...运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性详情见文档：Modernizr介绍文章 ?

1.9K5 2

前端-在 css 中什么是好的注释？

Martin Martin在文中详细讨论了代码注释，我不会完全重复他的话。简而言之，他的意思就是，这些注释是注定会过时的。程序执行时会忽视注释，所以无法保证这些说明注释会准确的描述代码作用。...我能想到为什么会写下这种注释：有时候我们的CSS会写得非常长，当在超过千行的文件内查找时，就需要这种带特殊标志的注释来帮助快速搜索。但事实上，很长很长的CSS文件已经不再流行了。...CSS预处理器让CSS更接近传统编程语言。尽可能使用命名良好且有意义的变量和函数，这样能让代码更清晰。... * FF下正常的盒子模型 * 2. Show the overflow in Edge and IE.... * 在Edge和IE下overflow为visble */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭