在 OSX Chrome 上打印 HTML 页面对齐

Question

我有一个 html 页面：http://www.newsryde.com/article/1127950

我已经使用以下方法实现了一个 css 样式表：

<link href="/css/jm/v2/print.css" rel="stylesheet" type="text/css" media="print" />

我的部分 CSS 内容如下：

html,
body{
    width:670px !important; /* based upon http://stackoverflow.com/questions/320357/ */
    background:white;
    margin:0 !important;
    position:relative;
    left:0;
}

但是当我去打印时，页面没有将内容对齐到左边。

我的问题是，如何将非模拟页面向左对齐，使其看起来像模拟页面？

当我进入 DevTools 并模拟打印样式表时，所有内容都正确移动到左侧，然后打印效果很好。这里有一些截图可以帮助解释：

未模拟第一次打印预览：

模拟，然后打印预览：

---

解决方案

感谢 Rolan Lu 提供有关转换的提示。我在print.css 文件的顶部添加了以下内容：

*,
*:after,
*:before{
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

Answer 1

你还有这个问题吗？ 我遇到了完全相同的问题。

我在一个元素上有一个填充，想在打印视图中删除它。 我在此填充的现有过渡中发现了问题。

类似这样的：

body {
  -webkit-transition: padding 0.3s;
  padding: 20px;
} 

我的解决方案是删除打印视图的这种转换。

喜欢：

@media {
  body {
    padding: 0;
    -webkit-transition: none;
  }
}