Question

将页眉和页脚放入CSS 3的正确方法是什么？我正在阅读http://www.w3.org/TR/css3-gcpm/，我想知道下面是否正确解释了如何使用运行元素。

运行元素具有从文档的正常“流”转移的属性，页眉和页脚需要它。

这是我想要实现的重要部分，否则有一个字符串集属性，可用于命名一个节并在页边距的其他地方使用它。我也很好奇第三方实施是否支持它们？我在一些工具中知道一些类似的标记，但我想知道这是否是CSS的意思？

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Testing</title>
<style type="text/css">
div.header {position: running(header)}
div.footer {position: running(footer)} 
@page{
         @top-center {content: element(header)}
         @bottom-center {content: element(footer)}
     }    
</style>
</head>

<body>

<div class="header"> HEADER </div> 
<div class="footer"> FOOTER </div>
<div>
    Normal Text
</div>
</body>
<html>

http://jsfiddle.net/VubtS/ - 但当然浏览器不会显示，因为它适用于分页媒体。

我在一些HTML中尝试这个 - PDF转换以查看它们对CSS 3的符合程度，但显然它们都没有呈现。根据Css3定义，我的标记是否正确？

Answer 1

我相信你的语法是正确的。但是我还没有看到浏览器支持它。我看过的大多数商业HTML到PDF工具（Winnovation，DynamicPDF，EvoPDF，RasterEdge，wkhtmltopdf等）都使用WebKit或其他不支持CSS3分页媒体的布局引擎。

我认为这些确实......

Prince（它使用自己的布局引擎PrinceXML）
DocRaptor（它使用PrinceXML作为网络服务）
RealObjects
Antenna House

Answer 2

只是为了确认@ theChrisMarsh的答案，语法是正确的。

我有Flying Saucer的直接经验，虽然它只支持CSS 2.1，但它包括对分页媒体的CSS-3风格的运行元素的支持。浏览器当然不会对它做任何事情，因为它们是@media print，尽管如果你尝试打印可能会有所不同（但是从FF 27.0开始，Firefox打印预览很糟糕）。

Answer 3

我一直都明白＆lt; header＆gt;应该在＆lt; body＆gt;打开后不久进入顶部。标签和＆lt; footer＆gt;应该在关闭＆lt; body＆gt;之前进入底部标签。他们的定位取决于您想要如何布置网站。

在CSS 3中放置运行元素的标准方法

3 个答案: