css - Firefox 无法识别媒体查询

标签 css firefox media-queries freemarker

我有一个用 FreeMarker 模板语言编写的小模板。我有以下一段 css:

<style type="text/css">
@media print {
    @page {
        size: landscape;
    }
}
@media screen {
    .run {
        min-height: 100%;
    }
}
/* More css properties goes here */
</style>  

问题是这两条规则仅在我在 Google Chrome 中打开网页时适用。当我在 Firefox 中打开它时,min-height 属性不适用于 .run div,并且 Firefox 以纵向模式打印我的页面,而不是原来的横向模式指定的。我做错了什么?
P.S.:文档类型字符串,如果它很重要,看起来像这样:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

最佳答案

我在从事打印样式工作时就知道,有些浏览器使用某些规则,而其他浏览器则不使用。我很确定大小:横向是其中之一。Firefox 使用了其他类似分页符,但其他人没有使用。所以它真的很随意。我祝你在 HTML 电子邮件和打印 CSS 方面取得成功关于使用网络,有两件事是我讨厌的。

关于css - Firefox 无法识别媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15968060/

相关文章:

php - 在一台机器上的 Firefox 上重复出现 "Unresponsive Script Warning"

html - Firefox 与 Chrome CSS 填充和边距差异

css - 在css中使用@media screen是不是很不专业

javascript - 防止图像在移动设备上加载

php - Bootstrap 3 在 Symfony3 中不起作用

javascript - CSS类不适用于特定场景

css - 垂直对齐响应宽度和高度图像

firefox - 如何在 Firefox 中覆盖 window.location?

javascript - 强制文档在 CSSStyleDeclaration 更新时重新渲染(chrome)

html - CSS选择一个没有特定子元素的元素