在css样式中添加@media not print后，它们在IE11中不起作用

在CSS样式中添加@media not print后，它们在IE11中不起作用的原因是IE11不支持@media not print这个媒体查询条件。

媒体查询是CSS3中的一个特性，它允许我们根据设备的特性或者媒体类型来应用不同的样式。@media not print是一个媒体查询条件，表示当不是打印媒体时应用样式。

然而，IE11并不支持@media not print这个条件，因此在IE11中添加这个条件的样式将不起作用。

解决这个问题的方法是使用其他的媒体查询条件来代替@media not print。例如，可以使用@media screen来表示屏幕媒体，或者使用@media all来表示所有媒体类型。

另外，如果需要在IE11中应用特定的样式，可以考虑使用IE11专有的CSS hack来实现。例如，可以使用条件注释来针对IE11编写特定的样式，或者使用IE11支持的其他CSS属性和选择器来实现相同的效果。

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

腾讯云官网：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
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps

相关·内容

在Linux系统中对LNMP源代码安装后添加php和nginx模块

在工作生产中以前的同事搭建了LNMP环境，可是在安装的过程中发现有好多php和nginx的模块没有安装,现在如果全部重新安装怕服务器不稳定，所以只有一个一个的添加没有安装的模块了。...今天我就给大家演示一下如何添加没有安装的模块，希望对大家有帮助。 .../etc/php.ini --打开php配置文件添加以下两行 extension_dir = "/usr/local/php-5.3.27/ext/" extension=mbstring.so

1.5K2 0

IE11的CSS兼容性问题

如果改变原有的padding值，那么在IE11生效了。别的浏览器又有问题了。于是在网上搜了一下有没有专门针对IE11的CSShack，就是只对IE11生效的CSS样式，一查还真有。...就是在CSS样式文件中加一个@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){里面是你的样式}。　　...比如，我在chrome浏览器中给一个div设置样式 div{ padding:0 12px; } 　　那么，在IE11中想要实现上面效果，需要在这个下面再添加一行样式　　 div{ padding...;} } 　　这里需要注意一下IE11的样式要写在最后面防止被覆盖，当浏览器为IE11时，@media中的样式会被执行一遍。　　...还有一个就是IE11针对h5的表单验证部分，验证失败后input标签会出现一个红色的框，比较丑。

2.1K4 0

高性能网站建设指南-前端性能优化（二）

规则6：将样式表放在顶部将DHTML特征的样式表放在文档顶部Head中首先下载它们能使页面呈现得更快。无样式内容的闪烁白屏现象源自浏览器的行为。...样式表在页面中的位置并不影响下载时间，但是会影响页面的呈现。如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西。...规则8：避免CSS表达式 CSS表达式是动态设置CSS属性的一种强大（并危险）的方式（只针对IE浏览器，其他浏览器不起作用）。...在IE11以前的版本，并不支持min-width，通过CSS表达式可以很好的解决该问题。...减少HTTP请求使用内容发布网络CDN 为组件添加长久的Max-Age或Expires头自定义ETage或移除ETag 压缩脚本和样式表将JavaScript和CSS放到外部文件中，并确保脚本仅被包含一次

2.1K2 1

【云端架构】前端 css print 用法

说到网页打印，首先想到的便是@media查询（即网页css），通过使用媒体类型print即可解决实际应用的大多数问题，比如实现只打印网页的某部分内容，调整字体大小、修改布局等使打印出来的纸质文件更简洁明了...代码如下： @media print{ /*隐藏不打印的元素*/ .no-print{ display:none; } /*其他打印样式*/ } 但是，就打印表单来说，仅解决上述问题是不够的，我们无法忍受表单存在打印分页时内容被截断...这就要使用到css打印样式了，即@page，用来指定页面盒子的各个方面。...当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。...中。

2.9K8 0

css print

说到网页打印，首先想到的便是@media查询（即网页css），通过使用媒体类型print即可解决实际应用的大多数问题，比如实现只打印网页的某部分内容，调整字体大小、修改布局等使打印出来的纸质文件更简洁明了...代码如下： @media print{ /*隐藏不打印的元素*/ .no-print{ display:none; } /*其他打印样式*/} 但是，就打印表单来说...这就要使用到css打印样式了，即@page，用来指定页面盒子的各个方面。...当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。...table中。

2.3K3 0

CSS3中的变量var了解

关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有，例如： :root{ --main-bg-color:...{ --color: 20px; background-color: #369; background-color: transparent; } css变量在js中的应用看如下例子...浏览器的兼容如图所示：到目前位置IE11也不支持该css变量。说到这儿感觉这个css变量也是很强大的，那么它跟预处理器比较，你觉得哪个更好？下面讲一下预处理器的劣势。...是否应该限制在块中？由于CSS最终目的是为HTML添加样式，事实证明还有另一种有效的方法给变量限定作用域：DOM元素。但由于预处理器不在浏览器中运行并且无法看到标记，它们不能这样做。...下面给一个css变量在媒体查询中的使用： :root { --gutter: 1.5em; } @media (min-width: 30em) { :root { -

1.4K3 0

rem适配布局

使用@media 查询，可以针对不同的媒体类型定义不同的样式； @media 可以针对不同的屏幕尺寸设置不同的样式；重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；苹果手机、Android...原理：直接在 link 中判断设备的尺寸，然后引用不同的 css 文件。...常见的 CSS 预处理器： Sass、Less、Stylus Less 作为 CSS 一种形式上的扩展，没有减少 CSS 的功能，而是在现有的 CSS 语法上，加入程序式语言的特性。...VSCode 插件：Easy LESS 插件可以实现安装插件后，重新加载 VSCode，之后只要保存 less 文件，会自动生成对应的 CSS 文件。...文件名：可以把一个样式文件导入到另一个样式文件中。

1.4K3 0

django 1.8 官方文档翻译：5-2-2 表单素材 ( Media 类)

如果你喜欢Django Admin应用所使用的那些组件，可以在你的应用中随意使用它们。它们位于django.contrib.admin.widgets。选择哪个JavaScript工具包？...它们之中没有必需选项。 css 各种表单和输出媒体所需的，描述CSS的字典。字典中的值应该为文件名称的列表或者元组。对于如何指定这些文件的路径，详见路径的章节。字典中的键位输出媒体的类型。...它们和媒体声明中CSS文件接受的类型相同： ‘all’, ‘aural’, ‘braille’, ‘embossed’, ‘handheld’, ‘print’, ‘projection’, ‘screen...如果你不想让Media 以这种方式被继承，要向Media 声明中添加 extend=False 声明： >>> class FancyCalendarWidget(CalendarWidget): .....作为 staticfiles app的简介的一部分，添加了两个新的设置，它们涉及到渲染完整页面所需的“静态文件”：STATIC_URL 和STATIC_ROOT。

7662 0

响应式设计

你可以对每个屏幕尺寸应用不同的 CSS，但是它们必须共享同一份 HTML。虽然要先给移动端写布局，但是心里装着整体的设计，才能帮助我们在实现过程中做出合适的决定。断点——一个特殊的临界值。...针对打印样式，使用 @media print 查询语句。不需要像 min-width 或者其他媒体特征那样加小括号。同理，针对屏幕样式，使用 @media screen。...对网页上有很多元素来讲，无须给每个断点都添加样式，因为在小屏幕或者中等屏幕的断点下添加的样式规则在大屏幕的断点下也完全有效。有时候移动端的样式可能很复杂，在较大的断点里面需要花费较大篇幅去覆盖样式。...# 添加响应式的列许多响应式设计遵循这种方法：当设计要求元素并排摆放时，只在大屏上将它们摆放在一行。在小屏下，允许每个元素单独一行，填满屏幕宽度。...没添加 CSS 的时候，块级元素不会比视口宽，行内元素会折行，从而避免出现水平滚动条。加上 CSS 样式后，就需要来维护网页的响应式特性了。

2.1K1 0

Django添加ckeditor富文本编辑器

root权限下，在vim中修改文件的编码:set fileencoding=utf-8后，重新加载页面，显示正常。四.如何高亮代码？...\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles中存在的css文件即可，比如zenburn.css 每种样式表的效果，可以看这里https...important很重要，没加这个的时候，这个css好像不起作用，原因不明。...六.添加后的文章，在显示全文的时候，如何合理自动换行？七.Tab键的使用，默认按Tab会移出编辑框，如何解决？...OL/UL的CSS样式表，padding-left导致的，解决方法，可以修改前端页面的样式表。是否有其他更好的解决方法？假设后端的CKEditor已经添加好样式表了？

2.1K3 0

Tailwind 初识

上一篇文章 Angular 中 SASS 样式的使用中，我们已经介绍了 sass 样式的介绍。本文，我们来介绍另一个编写样式的神器 -- Tailwind。...这些类名需要记住，如果你在 DOM 元素中并没有添加，那么就不会有效果，毕竟它只是个样式而已。...其 2.0 以上版本的 tailwind 专为 Chrome, FireFox, Edge 和 Safari 的最新版本设计并在它们上面经过了测试。...IE 有点凉凉;当然，如果你还是固执想使用 tailwind 兼容下 IE11 的话，使用 1.9 版本的 tailwind 在公司内部系统可以大胆使用 Tailwind，写过之后，你就知道有多香...比如：根元素的设置 font-size: 16px; 那么 0.75rem 代表的就是 12px rem 在兼容不同设备上很好用 tailwind 中的样式的类名很多，使用的过程中，打开官网，对照类名进行开发

6112 0

CSS3 Media Queries

CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print...CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。...Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式...中引入，单这种使用方法在ie6-7都不被支持如样式文件中调用另一个样式文件： @import url("css/reset.css") screen; @import url...("css/print.css") print; 在中的...

7572 0

css3 媒体类型(Media Type)

"); 不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media...CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。...Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式...单这种使用方法在ie6-7都不被支持如样式文件中调用另一个样式文件： @import url("css/reset.css") screen; @import url("css/print.css...") print; 在中的…中调用： @import url("css

8852 0

5个改变你编写CSS方式的新功能

CSS的新功能爆发式增长，它们彻底改变了我们编写CSS的方式。... 选择标签： p { font-size: 18px } 但是如果我们想要添加更多的样式呢？好吧，CSS是向下级联的，所以我们只需要在它之后添加一些样式即可。...我们可以完全抛弃 transforms ，并且在没有它们的情况下为我们的元素添加样式。...@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }...虽然 env() 的适用案例并不多，但它确实有潜力改变我们编写CSS的方式，这是我们应该注意的事情。你还能想到哪些改变我们编写CSS的新特性？在评论中告诉大家吧！交流

2432 0

CSS技术入门

CSS (Cascading Style Sheets) 其实并不是编程语言，CSS可以直接运行在浏览器中，浏览器就是它们的运行环境，CSS 中文名为层叠样式表，也就是一些样式的配置。什么是 CSS?...CSS 指层叠样式表 ( Cascading Style Sheets )样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在...号显示ID 属性不要以数字开头，数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用第三种选择器为标签选择器，即以 HTML 标签作为 CSS 修饰所用的选择器第四种内联选择器即直接在标签内部写...也可以在不同的媒体上使用不同的样式文件：<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css...; }}可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):width在520~699@media screen and (max-width: 699px) and (

2.9K6 1

Bootstrap

-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!

6.5K3 0

关于CSS 打印你应该知道的样式配置

CSS 打印分页功能需求： html 在一个区域显示数据，当放不下时，自动第二页存放，打印你可以使用 CSS 的分页属性来实现这个功能。...CSS 分页属性包括 page-break-before、page-break-after 和 page-break-inside，它们可以控制在哪里分页。...主要是这几个配置样式属性：分页符：使用 page-break-before 和 page-break-after 属性来在指定元素之前或之后插入分页符。...CSS 实现打印 Table 单元格换行显示 white-space: normal;：默认值，文本在遇到空格或换行符时换行，单词内部不会强制分割。...content: "页脚内容"; } } } 使用 @media print 媒体查询可以确保这些样式仅在打印时生效，并保持网页和打印版本的差异。

1.1K4 0

那些与 IE 相伴的日子

大家好，我是零一，IE 大家都不陌生，毕竟出现在大家的视野中已经很久很久，久到有20多年，当然也因前端技术的快速更新，给需要兼容IE浏览器的前端程序员带来了不少的困扰。...再bb一句，即使有了JQuery，IE还是有好多要兼容的地方，要吐了 CSS的使用总是差强人意 CSS3能让我们用简洁的语法完成花里胡哨的样式，而IE不允许。...--[if IE 6 ]> <link rel="stylesheet" type="text/<em>css</em>" media="all" href="....也就是说IE将永远停留在IE11版本，微软也终于接受了现实他们是心甘情愿放弃IE的吗？

4422 0

Hexo异步加载方案

这个很适合使用到Vue和jquery等js框架的js脚本，给它们添加defer属性以后，可以确保HTML加载完毕，且js下载完毕后，各个js脚本继续按照引入的顺序执行，从而确保不会因为依赖缺失而报错。...目前有效手段有两种，一种是通过定义一个无效media，使得该CSS引入优先级最低，再用onload="this.media='all'"在页面加载完成后纠正media，并加载CSS。...相信很多小伙伴在看了上述的CSS异步加载方案后，肯定迫不及待的去给自己博客的魔改自定义样式添加异步加载属性了，就算不是，现在也给我演一下，配合我的工作，这么做虽然可以减少HTML页面阻塞，但是很可能会出现首屏页面有那么几秒钟存在大片无样式的板块的情况...所以我们可以确立一条原则，为了追求视觉体验，不要给index.css等涉及首页样式的CSS文件添加异步加载。...然而事实上，相比于给CSS添加异步加载，不如将我们的魔改样式整合到index.css文件内，减少对服务器的请求次数。这样更能节省加载时间。

1.7K2 0

CSS：使用CSS媒体查询创建响应式布局

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。　　..." type="text/css" href="print.css" media="print" /> 　　以上的两句引入Css样式表的语句，比一般的Css引入语句就多了一个关键字“media”，media...print 适用于打印预览模式下查看的内容或者打印机打印的内容。　　*这里是将media属性放在了Css引入的语句中，所以在以下查询语句中就可以省略screen或者print。　　...2、一般的媒体查询语法： @media “media type” condition {/*CSS样式表*/} 　　其中“@media”也可以有另一中写法，“media=”；　　“media type...3、在Css的媒体查询中，可以使用三种逻辑运算，也即“and”，“or”，“not”，意思我当然不用解释。

2.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云