我有一个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/