Fatal编程技术网
  • html/
  • html5/css3分页符-*在chrome或safari中无法正常工作

html5/css3分页符-*在chrome或safari中无法正常工作

html google-chrome css safari

html5/css3分页符-*在chrome或safari中无法正常工作,html,google-chrome,css,safari,page-break,Html,Google Chrome,Css,Safari,Page Break,因此，我有以下CSS #container { margin: 0 auto 0 auto; width: 800px; } .print { display: none; } @media print { #container { margin: 0; page-break-before: always; } .print { display: block; } } 应用于以下HTML <html> <body> <div class=

因此，我有以下CSS

#container { margin: 0 auto 0 auto; width: 800px; }

.print { display: none; }

@media print {
  #container { margin: 0; page-break-before: always; }
  .print { display: block; }
}
应用于以下HTML

<html>
  <body>

    <div class="print">
      <img src="/logo" style="left: 50%; margin-left: -34px; margin-top: -15px; position: absolute; top: 50%;" />
    </div>

    <div id="container">
      <div>

        ...

      </div>
    </div>
  </body>
</html>


...

除了Chrome和Safari之外，所有的东西都是美妙的，这两个页面都是在<<强> >代码> <代码>之前插入一个分页<强>，并在第2页中间粘贴<代码> /Logo> <代码>右击。我得到同样的推杆（例如）

换页后：总是。我怀疑这可能与
位置有关：绝对


<如何> <代码> <代码>显示在第1页，中间有<代码> /Logo <代码>，<代码> <代码>开始于第2页的顶部？
我无法获得上面的代码来复制在生产中正在发生的事情。我无法以任何可理解的方式剥离生产代码，使其复制上述（工作）代码。无论如何，修改
img style
属性似乎可以修复chrome和safari，尽管我不知道为什么。我现在使用的是：