我有一个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并模拟打印样式表时,一切都正确地移到了左侧,然后进行打印就很好了。这是一些屏幕截图,以帮助说明:

不模拟第一个打印预览:


模拟,然后打印预览:






感谢鲁兰(Lulan Lu)有关过渡的建议。我在print.css文件的顶部添加了以下内容:

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

最佳答案

你还有这个问题吗?
我有完全相同的问题。

我在元素上添加了填充,并想在打印视图中将其删除。
我在此填充的现有过渡中发现了问题。

像这样:

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


我的解决方案是删除打印视图的此过渡。

喜欢:

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

关于html - 在OSX Chrome上打印HTML页面对齐方式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22774560/

10-12 12:54
查看更多