Why Doesn\'t CSS Page Numbering Work in Chrome, Firefox, and IE9?

Browser Support for CSS Page Numbering

Despite the widespread use of CSS, browser support for its features can vary. One such feature that has faced limited compatibility is CSS page numbers, designed to add page numbers to the printed versions of web pages. Setting up page numbering with CSS is a relatively straightforward process, as exemplified by the code snippet provided:

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

Unfortunately, as per the responses received, this technique has encountered issues on popular browsers such as Chrome, Firefox, and IE9 when attempting to print web pages. The reason for this lack of functionality lies in the limitations of browser support for margin boxes, as noted in the context:

No wonder it wouldn't work! ... Getting this implemented would save me the overhead of having to convert the printed media to PDF.

The cited Wikipedia page titled "Comparison of Layout Engines (Cascading Style Sheets)" provides further insight into the limited browser support for various features, including margin boxes. Until margin boxes receive more comprehensive support from browsers, implementing page numbering through CSS will remain a challenge.

The above is the detailed content of Why Doesn\'t CSS Page Numbering Work in Chrome, Firefox, and IE9?. For more information, please follow other related articles on the PHP Chinese website!