当前位置: 首页 > 面试题库 >

什么是最有用的媒体=“打印”特定的,跨浏览器兼容的CSS属性?

孟华晖
2023-03-14
问题内容

media="print"跨浏览器兼容的特定于CSS 的最有用的属性是什么?

我认为我们有这5个特定于打印的属性。

  1. page-break-before
  2. page-break-after
  3. page-break-inside
  4. widows
  5. orphans

请解释何时何地使用这些?哪些浏览器兼容?除之外,还有哪些其他常见的CSS属性可用于打印display:none


问题答案:

当我需要制作页面的可打印版本时,会使用著名的A列表分开的文章CSS设计:要打印和这篇文章。有一些常用标签,但是很大程度上取决于您使用的CSS模型(以及容器填充和边距):

body {
   background: white;
   font-size: 12pt;
   }
#menu {
   display: none;
   }
#wrapper, #content {
   width: auto;
   margin: 0 5%;
   padding: 0;
   border: 0;
   float: none !important;
   color: black;
   background: transparent none;
   }
div#content {
   margin-left: 10%;
   padding-top: 1em;
   border-top: 1px solid #930;
   }
div#mast {
   margin-bottom: -8px;
   }
div#mast img {
   vertical-align: bottom;
   }
a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
   }
#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#content a[href^="/"]:after {
   content: " (http://www.alistapart.com" attr(href) ") ";
   }


 类似资料:
  • 问题内容: 我的页面宽50/50。左半部分具有六个div的行。条件: 6个正方形必须始终保持正方形。 前5个正方形应在右边留有边距/填充以进行分隔。 所有六个正方形必须保持同一行。如果我可以使它正常工作,那么我可以对较小的视口中的响应度进行必要的调整。 跨浏览器兼容最新版本的chrome和firefox。 L1 L2 L3 L4 L5 L6 问题答案: The main trick here is

  • 问题内容: 我已经阅读了许多关于此的文章,但没有一个有任何明确的答案。这是我的代码: 现在,setAttribute()方法(带有mozilla注释)在mozilla中可以正常工作,但前提是该方法位于其上方的行之后。因此,换句话说,它似乎默认为最后设置的那个。.onclick方法(带有ie注释)在两种情况下均不起作用,我使用不正确吗? 无论哪种方式,我都找不到在IE中完全实现此功能的方式,更不用说

  • 问题内容: 专业的网页设计师如何创建跨浏览器的CSS?通常是手动完成,还是像YUI针对JavaScript那样可以简化流程的工具包?我希望远离Dreamweaver之类的所见即所得编辑器。谢谢! 问题答案: 通常是手工完成的。 通常从对比赛场地应用CSS重置开始。 而且,您应该针对符合标准的CSS,然后作为对IE的最后手段,才可以使用hacks(是的,我刚刚说过)。

  • 浏览器兼容 主流浏览器都兼容 HTML5 的新标签,对于 IE8 及以下版本不认识 HTML5的新元素,可以使用 JavaScript 创建一个没用的元素来解决,例如: <script> document.createElement("header"); </script> 也可以使用 shiv 来解决兼容性问题,详情可参考 HTML5 Shiv

  • 问题内容: 我正在创建跨浏览器兼容的旋转(ie9+),并且在jsfiddle中有以下代码 CSS和HTML非常简单,仅用于演示: 使用时旋转有效,但使用时无效; 为什么会这样,有没有办法解决? 谢谢。 问题答案: CSS转换尚无法与jQuery动画化。您可以执行以下操作: 而且,顺便说一句:您不需要在jQuery 1.7+之前为CSS3转换添加前缀 更新资料 您可以将其包装在jQuery插件中,以

  • 我们在div里放一个img,发现: 在html和html5中,div的长宽是不同的,后者的高度要超过几个像素。 比如说,下面这个是html的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">