正文 

当前位置： 首页 > 源码 >

css 媒体查询以针对除 IE 之外的所有浏览器

     2023-03-06     45

关键词：

【中文标题】css 媒体查询以针对除 IE 之外的所有浏览器【英文标题】：css media query to target all browsers except for IE 【发布时间】：2014-09-29 04:08:36 【问题描述】：

我正在寻找一个针对除 IE 之外的所有浏览器的媒体查询。

例如：

    @media (........)

有没有办法做到这一点？

我正在使用 sass-bootstrap，所以那里可能有一个选项。

谢谢！

这是在 IE 中不起作用的代码：

.animations 
    .legend 
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: internetmarketing 3s linear forwards;
    
    .line 
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: internetmarketing 3s linear forwards;
        animation-delay: 2s;
    


@keyframes internetmarketing 
    to 
        stroke-dashoffset: 0;

【问题讨论】：

媒体查询不能针对浏览器。您到底想完成什么？为什么必须阻止 IE 而不管其版本如何？ 我已经制作了一些关键帧，但它们在 IE 中不起作用。我考虑过使用媒体查询来禁用它们。也许通过触发动画的javascript在其他浏览器中添加一个类是一个好习惯。我将在下面发布关键帧。 如果关键帧不起作用，为什么需要禁用它们？他们有什么害处吗？ 折线中有一些 display="none" 属性，因为动画在用户向下滚动时开始。在 IE 中什么都看不到。也许我应该在不在 IE 中时添加这些属性。 我用javascript添加动画来修复它，对IE有一个例外。谢谢大家！ 【参考方案1】：

Html5 Boilerplate中有一个很好的技巧，你应该试试:)

您应该在 HTML 的顶部插入以下代码：

<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie ie8 ie7"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie ie8 no-ie7"> <![endif]-->
<!--[if gt IE 8]>    <html class="no-js ie no-ie8 no-ie7"> <![endif]-->
<!--[if !IE]><!--> <html class="no-js no-ie"> <!--<![endif]-->
<head>

现在您可以为非 IE 浏览器隐藏或样式化您的页面：

.no-ie 
   .animations 
      .legend 
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: internetmarketing 3s linear forwards;
      
     .line 
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: internetmarketing 3s linear forwards;
          animation-delay: 2s;

据我所知，它适用于所有浏览器

【讨论】：

这不适用于 IE 11，因为不再支持此条件！

ie浏览器不兼容css媒体查询的解决办法

考虑到在不同分辨率下，网站页面依然能显示一致，除了通过js来控制，css媒体查询更为方便，而痛点在于ie8不支持。我们可以通过respond.js库来解决，这个插件的原理很简单：将head中所有外部引入的css文件路径取出来存储在一... 查看详情

需要 SQL 查询以获取除 sysadmin 程序之外的所有并发程序的列表

】需要SQL查询以获取除sysadmin程序之外的所有并发程序的列表【英文标题】：NeedSQLquerytogetlistofallconcurrentprogramotherthansysadminprogram【发布时间】：2020-12-2207:27:01【问题描述】：我正在尝试生成除OracleEBSR12.1中的sysadmin程序之外的所... 查看详情

CSS 媒体查询在 IE 9 中不起作用

...【问题描述】：我在设计中包含了一些媒体查询，以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示：@mediascreenand(min-width:1024px)@mediascreenand(max-width:1024px)Chrome、Safari和Firefox运行良好，只 查看详情

针对特定设备的 CSS3 媒体查询

】针对特定设备的CSS3媒体查询【英文标题】：CSS3mediaqueriestotargetspecificdevice【发布时间】：2013-01-0103:19:03【问题描述】：我有一个带有基本CCS的wordpress主题，现在我想让这个设计响应下面提到的大多数使用的设备布局。我想以横... 查看详情

IE 的 CSS 选择器限制中如何计算媒体查询？

】IE的CSS选择器限制中如何计算媒体查询？【英文标题】：HowaremediaqueriescountedinIE\'sCSSselectorslimit?【发布时间】：2014-09-2300:38:39【问题描述】：知道IE如何处理有关此CSS选择器限制的媒体查询吗？它是将其视为单个CSS规则还是将其... 查看详情

选择除第一个之外的所有“tr”

...法，但发现它不起作用。【问题讨论】：这需要兼容哪些浏览器？w3schools.com/CSS/css_pseudo_classes.asp@Pekka的问题很重要，因为我想不出任何方法可以使 查看详情

针对不同媒体查询的不同 CSS 文件

】针对不同媒体查询的不同CSS文件【英文标题】：DifferentCSSfilesfordifferentMediaqueries【发布时间】：2021-10-3014:56:24【问题描述】：有没有办法让HTML文件根据媒体属性使用不同的样式表？我知道link方法采用媒体类型，但我找到的所... 查看详情

Safari：媒体查询未按预期宽度触发

....leftdisplay:none;这适用于除Safari10.0.4及更低版本之外的所有浏览器。Safari似乎以不同的方式处理 查看详情

针对大部分智能手机的媒体查询

...题描述】：我编写了一些CSS代码来使HTML页面更适合移动浏览器。为了确保我的CSS仅适用于手机，我使用以下媒体查询：@mediaonlyscreenand(max-device-width:480px)作为一名iPhone开发人员，我在这款设备上进行了测试，它运行良好。但 查看详情

@meda媒体查询

...要设置设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。浏览器支持表格中的数字表示支持@media规则的第一个浏览器的版本号。RuleChrome IE  FireFo 查看详情

基于 IE8 和 REM 的媒体查询

...述】：我希望我的媒体查询基于REM，以支持用户进行各种浏览器缩放和/或基本/浏览器字体大小调整。理想情况下到IE8。加载jQuery、HTMLshiv、Respond和REMpolyfill，结果REMpolyfill不支持媒体查询。虽然不太明白为什么，https://github.c 查看详情

IE7、IE8支持css3媒体查询[重复]

...的修复程序，但它无法正常工作，因为它适用于IE9和其他浏览器。有没有不同的写法。我也尝试包含css3me 查看详情

简单的媒体查询规则在页面刷新时更改

...查询规则以它们应该的特定宽度触发，但是如果我已经将浏览器窗口调整到那个较小的宽度，然后将浏览器窗口扩展到它之外，就会发生一些奇怪的事情。在我刷新页面之前，一切看起来都很正常。只有在页面刷新时，布局才会... 查看详情

SVG 动画：使用 CSS3 媒体查询将 IE10 与其他现代浏览器隔离开来

】SVG动画：使用CSS3媒体查询将IE10与其他现代浏览器隔离开来【英文标题】：SVGanimation:IsolatingIE10fromothermodernbrowserswithCSS3mediaqueries【发布时间】：2013-04-1915:58:42【问题描述】：我在SVG文件中编写了精美的加载动画。我的问题是Inte... 查看详情

IE 无法识别我的媒体查询

...ueries【发布时间】：2015-09-2206:23:23【问题描述】：在其他浏览器中它可以识别并正常运行，但IE似乎无法识别我的媒体查询。我的代码有什么问题吗？我做过一个类似的设计，没有问题，但这个令人困惑。为什么不识别？这是css... 查看详情

重写查询以使用除 CTE 和子查询之外的窗口函数

】重写查询以使用除CTE和子查询之外的窗口函数【英文标题】：RewritequerytousewindowfunctionsexceptCTE\'sandsubqueries【发布时间】：2018-01-2206:24:46【问题描述】：我有2个相关的表。package:|id_sort|volume|date|---------------------------|int|float|date|so... 查看详情

删除除给定查询获取的所有记录之外的所有记录

】删除除给定查询获取的所有记录之外的所有记录【英文标题】：Deleteallrecordsbutonethatarefetchedbyagivenquery【发布时间】：2021-08-0219:22:05【问题描述】：我有两个表reminder和reminder_users，在这些表之间有一个外键约束，reminder_users是... 查看详情

MySQL - 查询除第一行之外的所有行[重复]

】MySQL-查询除第一行之外的所有行[重复]【英文标题】：MySQL-Queryforallrowsexceptfirstone[duplicate]【发布时间】：2016-10-1011:20:34【问题描述】：我一直无法获得类似查询的结果-我需要表中除第一行之外的所有行，因为我只有第一行有... 查看详情