如何正确编写媒体查询，以便在IE中使用一个样式表，并在所有其他浏览器中使用另一个样式表？

媒体查询是一种在CSS中使用的技术，用于根据设备的特性和屏幕尺寸来应用不同的样式。在编写媒体查询以在IE中使用一个样式表并在其他浏览器中使用另一个样式表时，可以按照以下步骤进行：

首先，需要在HTML文档的<head>标签中引入两个样式表，一个用于IE浏览器，另一个用于其他浏览器。例如：

<head>
  <link rel="stylesheet" href="ie-styles.css" media="all">
  <link rel="stylesheet" href="other-styles.css" media="not all">
</head>

接下来，需要在ie-styles.css样式表中编写适用于IE浏览器的样式规则。这些样式规则将在IE浏览器中生效。
然后，在other-styles.css样式表中编写适用于其他浏览器的样式规则。由于media属性被设置为not all，这些样式规则将在除IE以外的所有浏览器中生效。

下面是一个示例：

/* ie-styles.css */
body {
  background-color: yellow;
}

/* other-styles.css */
body {
  background-color: blue;
}

在上述示例中，IE浏览器将使用ie-styles.css样式表中的样式规则，而其他浏览器将使用other-styles.css样式表中的样式规则。

需要注意的是，以上方法仅适用于较旧的IE浏览器版本（如IE9及更早版本）。对于较新的IE浏览器版本和其他现代浏览器，建议使用CSS3中的媒体查询功能来实现响应式设计。

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

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

有帮助

没帮助

相关·内容

响应式设计笔记

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。...本例中，样式会应用于所有的投影仪。可以在CSS样式表中使用媒体查询。...h1 { color: green } } 还可以使用CSS的@import指令在当前样式表中按条件引入其他样式表。...怎么阻止Safari或其他移动浏览器做这样的默认处理呢？可以用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的标签中插入一个标签。...弹性图片在现代浏览器（包括IE 7+）中要实现图片随着流动布局相应缩放非常简单。

1K2 0

CSS和网络性能

是针对DOM应用的所有CSS规则; 使用async和defer属性很容易使JavaScript无阻塞; CSS不容易异步; 所以要记住的一个好的经验法则是，您的页面会在你最慢的样式表加载完成之后才展示。...在这篇文章中，我想看看CSS如何证明是网络上的一个重大瓶颈（本身和其他资源）以及我们如何缓解它，从而缩短关键路径并缩短开始渲染的时间。...如果您正在使用大型或遗留代码库，事情会变得更加困难...... 拆分媒体类型如果实现关键CSS非常棘手 - 它可能只是一种选择，我们将主要的CSS文件拆分为其各自的媒体查询。...不要在Async 脚本之前放置上一节讨论了如何通过其他资源减慢CSS，本节将讨论CSS如何无意中延迟下载资源的下载，主要是使用异步加载代码段插入的JavaScript...在HTTP / 1.1中，我们将所有样式连接到一个主要包中是很典型的。我们称之为app.css： <!

1.3K3 0

仅使用CSS就可以提高页面渲染速度的4个技巧

这将使滚动条的行为以一种非预期的方式进行。为了解决滚动条的问题，你可以使用另一个叫做 contain-intrinsic-size 的 CSS 属性。...为了完成这种响应式的特性，我们必须根据媒体尺寸编写新的样式。当涉及页面渲染时，它无法启动渲染阶段，直到 CSS对象模型（CSSOM）已准备就绪。...根据你的Web应用，你可能会有一个大的样式表来满足所有设备的形式因素。但是，假设我们根据表单因素将其拆分为多个样式表。...在这种情况下，我们可以只让主CSS文件阻塞关键路径，并以高优先级下载它，而让其他样式表以低优先级方式下载。...4.避免@import包含多个样式表 通过 @import，我们可以在另一个样式表中包含一个样式表。当我们在处理一个大型项目时，使用 @import 可以使代码更加简洁。

7351 0

使用CSS提高网站性能的30种方法

所有现代浏览器都支持这种字体，IE用户可以回到OS字体。您还应该在CSS中定义适当的字体显示加载选项。以下选项可提供明显的性能提升：互换：使用第一个备用OS字体，直到Web字体可用。...所有这些都更易于开发，使用更少的代码，渲染更快，并且可以适应不同的屏幕大小，而无需媒体查询。非常旧的浏览器不支持这些属性，它们将每个元素显示为一个标准块。...将这段代码添加到样式表中，看看滚动是如何变得不稳定的！...下面的示例将剩余的CSS作为"打印"样式表，浏览器以较低的优先级异步加载。该加载代码在下载后将其切换回所有媒体的标准样式表。...当空间允许时，媒体查询和固有的网格布局可以应用更复杂的桌面设计。在移动的和桌面浏览器中彻底测试您的样式。

3.4K2 0

HTML和CSS面试题及答案总结一

DOCTYPE> 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范来渲染文档。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。...才能告知浏览器文档所使用的文档类型。当出现无样式内容闪烁的时候如何进行处理解决？答： @import导入CSS文件会等到文档加载完后再加载CSS样式表。...2）增加了更多的CSS选择器多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局。 37.为什么要初始化CSS样式？...39.经常遇到的浏览器兼容性有哪些？如何解决？答： 1） 浏览器默认的margin和padding不同。 2） IE6双边距bug。 3）在ie6，ie7中元素高度超出自己设置高度。...5）透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6。

1.2K1 0

【前端攻略--HTMLCSS】媒体查询

; 　　　　　　　font-size:14px; 　　　　　　　... } } 解读下代码意思：当页面宽度小于960px时，使用以下对应样式表..... ③当然我们也可以媒体查询一个页面区间宽度， @media screen and (min-width:960px) and (max-width:1200px){ 　　　body{ 　　　.... ④ 媒体查询的其他参数以上是我们在开发过程中常用到的三种媒体查询特性小于、大于、等于，除此之外她还有其他特性，下面是我查找总结媒体查询的其他参数和用法. width/height：浏览器可视宽度...（这个很少用得到） 2）媒体查询的"局限性" 我要说的这个局限性，指的是它不能用在IE8以下，IE8以下就不说了，它目前应该被前端骂的是身残志坚了，IE8以下了既不支持HTML5，也不支持CSS3的媒体查询...，这个怎么搞...IE8以下放弃算求，但是有些公司，用户又不多啊，非得要求你小前端要响应式IE8以下，还好可以在项目中导入Respond.js，这样使用CSS3的媒体查询就有作用了，对于这个Respond.js

2K1 0

CSS技术入门

importantCSS 优先级法则：选择器都有一个权值，权值越大越优先；当权值相等时，后出现的样式表设置要优于先出现的样式表设置；创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式...这是为了避免在不同的浏览器中的可视化差异。IE8 和早期有一个问题，当使用 float 属性时。如果一个容器元素（在本例中）指定的宽度，!...media 规则媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。...多媒体查询多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。...像素的设备上修改背景颜色:@media screen and (min-width: 480px) { body { background-color: lightgreen; }}可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询

2.8K6 1

请避免犯这9个常见的 CSS “坏习惯”

important 是 CSS 中的一个关键字，它可以帮助我们将属性值设置为比其他样式选项更重要。例如，如果您将 !important 声明应用于元素样式，那么该样式将覆盖该属性类别的所有其他样式。...以下是一些使用它的情况：在一个样式表中，你使用了第三方库或框架，并且你需要你自己编写的自定义样式（自定义的CSS）来覆盖该库中的样式，而不需要修改该库的主题。...4、不使用CSS重置不同的浏览器具有各种默认样式，这些样式不同，导致元素的外观不一致。这就是为什么我们必须定义一些样式，以便在其他浏览器上为网页样式提供一致的起点。这些样式被称为“CSS重置”。...如何避免使用过于复杂的选择器如果你在你的样式表中遇到了像下面这样的代码片段，那就意味着你正在使用过于复杂的选择器。...7、忽略浏览器兼容性 浏览器兼容性很重要，因为你不希望样式在一个浏览器上良好运行，在另一个浏览器上则运行不正常。忽略浏览器兼容性可能会导致用户在不同浏览器上的体验不一致。

1921 0

寒假提升｜ Day3 CSS 第一部分

常见的浏览器内核有： trident（三叉戟）—- IE浏览器、360安全浏览器、UC浏览器、搜狗高速浏览器、百度浏览器 gecko（壁虎） —- Mozilla、Firefox pestro...写出一个例子，并且说明他们的关系。父子关系和兄弟关系十. 注释的作用，HTML的注释如何编写。...08.相对路径跟绝对路径 09.a元素的使用 10.a元素的在本页面的锚点链接 11.a元素跟img元素的结合使用 12.a元素跟其他元素的链接 13.iframe元素的使用 14.iframe元素和...理论上来说，所有的HTML元素，我们都能实现相同的事情: 标签语义化的好处方便代码维护; 减少让开发者之间的沟通成本; 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应; ...sheet) 是将css编写一个独立的文件中，并且通过元素引入进来; 使用外部样式表主要分成两个步骤: 第一步:将css样式在一个独立的css文件中编写(后缀名为.css); 第二步

6242 0

初识HTML5和CSS3

另外，响应式设计就是通过CSS3的媒体查询来实现的。...如何在HTML中引入样式表 •行内式 –任何HTML标签都拥有style属性，用来设置行内样式，其基本语法如下所示： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;...1; 属性2:属性值2; 属性3:属性值3;} •外链式 –链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML...CSS3与浏览器 •浏览器私有前缀 –为了更好的兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，将某个样式以-xx-开头，具体如下： -webkit- → 只有以Webkit...-mOZ- → 只有以Gecko为内核的浏览器可以解析。如Firefox。 -ms- → 只有以Trident为内核的浏览器可以解析。如IE。

3.7K1 1

Web前端最全面试宝典- CSS篇

10.如何水平居中一个元素如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现如果需要居中的元素为常规流中block元素 1）为元素设置宽度 2）...1）优先级就近原则，同权重情况下样式定义最近者为准; 2）载入样式以最后载入的定位为准; 优先级为: 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。 !...(这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。...当媒体查询返回假，标签上带有媒体查询的样式表 仍将被下载（只不过不会被应用）。包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

1K1 0

HTMLCSS 常见面试题汇总

**严格模式与混杂模式：**严格模式的排版和JS运作模式是以浏览器支持的最高标准运行；而在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作；当 DOCTYPE 不存在或者格式不正确时...； 4、如何让一段文本中的所有英文单词的首字母大写 text-transform: none | capitalize（将每个单词的第一个字母转为大写） | uppercase（将每个单词都转为大写）|...创建带边框的两列等高布局：用border-left来做，只能使用两列使用正padding和负margin对冲实现多列布局方法：在所有列中使用正的上下padding和负的上下margin，并在所有列外面加上一个容器...新增特性有：圆角（border-radius）、阴影（box-shadow）、对文字加特效（text-shadow）、线性渐变（gradient）、变形（transform）；增加了更多的CSS选择器，媒体查询...如果使用@import方式对CSS进行导入，会导致某些页面在windows下的IE出现一些奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象被称为文档样式短暂失效，简称FOUC 原理：当样式表晚于结构性

1.5K2 0

RPO漏洞原理深入刨析

/xyz" 下面的样式表使用示例中使用的一个常见的相对URL，其中link元素使用相对URL引用"style.css"，具体被引用的文件取决于您在站点目录结构中的位置，它将基于该位置加载样式表，例如:如果您当前在一个名为...，那么我们就可以使用CSS解析来忽略HTML并在IE兼容中执行我们的自定义CSS，当站点包含如下样式表时，我们直接访问URL会直接解析对应的页面： <link href="styles.css" rel...，"rpo.php/"的简单请求使相关样式将页面本身作为样式表加载，实际请求是"/labs/xss_horror_show/chapter7/rpo.php/styles.css"，浏览器认为还有另一个目录...，再次使用"}"忽略HTML，然后使用@import语句在IE上工作得很好，尽管从技术上讲以这种方式使用import语句是无效的语法，当然RPO也并不限于IE，我们可以在其他浏览器上使用该技术，但Chrome...、Firefox、Opera或Safari上的CSS不支持JavaScript，另一个限制是文档类型不能包含在目标文档中，因为这会导致CSS的解析器停止在非IE浏览器上解析HTML文件

3652 0

如何提高CSS性能

我们必须在所有可能的状态下，在所有可能的设备上仔细审核整个网站（以覆盖媒体查询），并执行所有可能改变样式的JavaScript功能。...当样式表加载完成后，将该样式表应用于所有媒体（即屏幕而不仅仅是打印），使用onload属性将媒体设置为all。...预加载会很早地以最高优先级获取文件，可能会降低其他重要下载的优先级。如果你确实想要预加载提供的高优先级获取（在支持它的浏览器中），loadCSS的创建者建议你把它和第一种模式结合起来，就像这样。...首先，浏览器必须下载CSS文件来发现导入的资源，然后在渲染之前发起另一个请求来下载它。如果你有一个包含@import url(import.css)的样式表；网络瀑布看起来像这样。 ?...使用可变字体以减少文件大小。可变字体使字体的许多不同变化能够被整合到一个文件中，而不是为每一种宽度、重量或样式都有一个单独的字体文件。

2.2K3 0

网页制作105个问答

15.怎样在网页中加入多媒体文件? 　有些多媒体文件无需其他程序就可以播放，而有许多多媒体文件需要外部程序的帮助，当浏览器下载不支持的格式时会调用外部程序。...21.如何打开一个新的浏览器窗口并设置窗口的属性? 如果你需要在载入站点的同时,再打开另一个新窗口,加入以下�爰纯? <!...57.如何让所有页面共享同一个层叠样式表(CSS)?...,activeX控件等，这是把页面动态的关键；第五步：测试动态页面以适应更多浏览器；第六步：发布动态页面并在上面标明该页是动态页面(dhtml)。...当然你也可以制作两套网页，利用javascript来检测不同浏览器以装入相应网页。 78.如何正确使用字体?

4.7K2 0

前端开发面试题答案(二)

* 优先级就近原则，同权重情况下样式定义最近者为准; * 载入样式以最后载入的定位为准; 优先级为: 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。...(_这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。...（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）...当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

1.3K4 0

CSS3 Media Queries

“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，...CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。...换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。...中引入，单这种使用方法在ie6-7都不被支持如样式文件中调用另一个样式文件： @import url("css/reset.css") screen; @import url...，可以用来排除不支持媒体查询的浏览器。

7332 0

【Hello CSS】序章-起源

页面有一个样式表，并且Web用户将拥有自己的样式表，这两个样式表一起渲染在页面上。支持多个样式表被视为一种维护Web个人自由的方法，而不是支持开发人员（他们仍然手动编写单独的HTML页面）的方式。...与许多其他提案相比，CSS的一个值得注意的事实是它的简单性。它易于分析，易于编写和轻松阅读。...例如，仅添加了对上下文选择器（ body ol li）的支持，因为 Netscape已经有一种方法可以从超链接的图像中删除边框，并且似乎有必要实现流行浏览器可以执行的所有操作。...这跟每个开发者跟你说的一样，浏览器近几年才真正标准化，这里距首次发布CSS已经过去了21年（原文15年）了。最终BOSS IE3以（有点可怕的） CSS支持着称。...还有什么可能由于W3C的一些公开羞辱， IE5.5在2000年推出了几乎完整的CSS1支持。当然，正如我们现在所知，浏览器的CSS在未来10年里都非常粗糙且难以使用。

4343 0

css3 媒体类型(Media Type)

“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，...CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。...换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。...单这种使用方法在ie6-7都不被支持如样式文件中调用另一个样式文件： @import url("css/reset.css") screen; @import url("css/print.css...，可以用来排除不支持媒体查询的浏览器。

8162 0

前端入门学习--CSS

多重样式优先级 样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。...为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中，背景颜色的属性简写为background。...绝对大小：设置一个指定大小的文本不允许用户在所有浏览器中改变字体大小确定了输出的物理尺寸时绝对大小很有用相对大小：相对于周围的元素来设置大小允许用户在浏览器中改变文字大小...CSS 媒体类型一些CSS属性只设计了某些媒体。例如”voice-family”属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。...@media 规则 @media 规则允许在相同样式表为不同媒体设置不同的样式。在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。

27.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云