更新的问题
所以,我找到了导致这个问题的原因。正如这个问题中建议的那样,它实际上是Open Sans。现在我的问题是,为什么使用Open Sans时Chrome第一次不加载?
这是我看到的。Open Sans直接包含在项目中。与上面的问题中的导入语句不同,我们有许多@font-face
css规则,比如这一个:
@font-face {
font-family:'Open Sans';
font-style:normal;
fontweight:300;
src:url('../fonts/OpenSans-Light-webfont.eot');
src:url('../fonts/OpenSans-Light-webfont.eot?#iefix')
format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff')
format('woff'), url('../fonts/OpenSans-Light-webfont.ttf')
format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#open_sanslight')
format('svg')
}
如果我注释掉它们,我使用的
<h3>
标签会正常加载。如果我保留它们,第一次不会加载,但是每次之后都会加载。有没有其他使用Open Sans的人遇到这个问题?你们是如何解决的?
原始问题
我在使用Google Chrome打印时遇到了问题。第一次打开打印时,会缺少一些特定的元素。之后每次打印都正常加载。就好像CSS规则没有完全处理完成,然后打印预览就渲染出来了。
该页面使用Bootstrap 3和一些自定义样式。有问题的元素的HTML如下:
<h3 class="myHide">Some text</h3>
屏幕/普通CSS如下:
.myHide { display: none !important; }
打印CSS如下:
.myHide { display: block !important; }
不幸的是,我不能分享实际的CSS和HTML,但上面的内容在功能上是相同的。第一次打印时,所有具有该类的<h3>
都不会显示,但应该出现的地方有空白。之后每次打印,它都会正常显示。我只在Chrome中看到这个问题。无论我如何打印,FF和IE每次都可以正常工作。
我已经尝试了一些主要是对CSS进行微调的方法。其中一个尝试是从自定义类切换到Bootstrap提供的显示/隐藏类,但观察到相同的行为。我花了很长时间在谷歌上搜索解决方案,尝试不同的选项,并与他人交流,但还没有找到有效的解决方案,所以我希望在这里能找到有人看到过这个问题。
注意:我查看了一个类似的问题,但是字体并没有像这个项目那样导入,因此该解决方案不起作用(除非Open Sans本身存在问题,而不是它被导入到项目中的问题)。
更新:该页面确实有一些监听打印事件的函数。具体来说,我使用onbeforeprint
和onafterprint
来处理FF和IE,我使用matchMedia
来处理Chrome。我仍在研究它们,但似乎这些函数会延迟第一次处理CSS样式和HTML元素,而不是后续次数。但是,我会继续研究。
div
这样的元素包含你要隐藏/显示的h3
元素? - NotJaymatchMedia
运行之前呈现,而在 Chrome 中matchMedia
函数在打印样式呈现之前运行。这仍然无法回答为什么大多数页面都可以正常呈现,但这些特定的h3
元素却无法呈现的问题。 - jvdub