本文介绍了@page :first { margin: ... } 在 Chrome 错误中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

参考完整的小提琴: 显示来自 Chrome 的未知支持(未知支持.请更新."

)但基于我们的测试,文章中缺少经过测试的示例,并且错误报告看起来您将无法成功使用 @page 样式的更灵活规范.

Referring to the full fiddle at: http://jsfiddle.net/XT92a/

@page {
    margin: 1in;
}

@page :first {
    margin: 2in 1in 3in 3in;
}

I expect the above rule to make the first printed page have certain margins and all other pages have 1 inch margins.

Instead, I get the following in Chrome's print preview (accurate to the printed output). The margins are different on the non-first pages, but they are not correct. Commenting out the :first margin rule allows the non-first pages to print with the correct layout, but of course, the first page is also affected.

Mozilla's documentation seems to me to claim that Chrome supports this properly. And clearly Chrome reacts, but not correctly. I'd reference Chrome documentation if I could, but Google sucks at documentation! (Is there a google equivalent of the MDN? I can't find it.)

It's strange to me that I can't find mention of this problem elsewhere, if Chrome should have supported this since version 2.0 and that print layouts are such a huge PITA.

Am I doing it wrong? Is there a robust workaround? I've tried @page:first (no space), setting margin values independently trbl style and individually, and swapped the order of the rules in the style declarations. No effect.

解决方案

You stated:

True, but the :first CSS pseudo-class shows unknown support from Chrome ("Unknown support. Please update this."

Also, there are many print preview issues with Chrome and I stumbled across some that sounded similar to this problem such as this one. Nevertheless, I could find no work arounds. Just so you are aware in your own testing I tried:

  • negative margins
  • padding rather than margins
  • large borders to simulate margins
  • forced page breaks (possible hack solution)
  • explicit width and height
  • !important

I performed a lot of testing and Chrome appears to ignore or improperly implement the CSS rules when generating the preview PDF file. Personally, from my testing results, I think this is a bug.

Update

  • Firefox v17.0.1 - Does not apply @page rules at all.
  • Chrome 23.0.1271.97 m - incorrectly applies the :first pseudo class on all pages.
  • IE 9.0.8112.16421 - performs the same misapplication of rules as Chrome

My findings coincide with the browser compatibility chart on the :first pseudo class page. That is, an unknown compatibility for Chrome and a "not supported" compatibility for Firefox. I was unable to test IE8, but my test with IE9 does not support the chart's claim. Even Microsoft's examples fail to render correctly (CSS How-to: Optimize Pages for Printing Using CSS).

After more testing, I can only conclude that @page hasn't been completely integrated into most browsers. The specifications are present (there are new specs. for CSS3) but based on our tests, the lack of tested examples in articles, and the bug reports it looks like you won't be able to successfully use the more flexible specs of the @page styling.

这篇关于@page :first { margin: ... } 在 Chrome 错误中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 02:19
查看更多