d3w*_*abe 6 css media-queries twitter-bootstrap
我的 Bootstrap (v3.3.5) 布局 css 在 767px 处遇到了仅 Chrome 的问题，其中布局样式根本没有被应用。
这是在 3 个浏览器上尝试控制台后的行为...
Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout
Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout
Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)
我所有的媒体查询都是按如下方式创建的......
@media (max-width: 767px) {
/*small view*/
}
@media (min-width: 768px) {
/*full view*/
}
我尝试过更改这些值，以便存在重叠（例如，最小宽度为 767px），但没有效果。
如果这有点含糊，我深表歉意，但我真的不知道从这里开始调查问题，并且只发现了一份来自先前版本的 bootstrap 的类似行为的报告（https://github.com/twbs/引导/问题/1531）。
有谁知道我只能在 Chrome 上看到此内容的任何可能原因吗？无论哪种方式，任何有关适当调查方式的建议都将非常感激。
-- 编辑 -- 经过几个小时的研究，我测试了这个简单的文件......
<html>
<head>
<style>
@media (max-width: 767px) {
.headlineText {
font-size: 10px;
color: red;
}
}
@media (min-width: 768px) {
.headlineText {
font-size: 10px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="headlineText">this is a headline</h1>
</body>
</html>
仅在 Chrome 上 - 767 像素时，文本既不是绿色也不是红色 - 它是黑色、Times New Roman，并且比 10 像素大得多。当然，我无法通过上传到 fiddle/codepen 来复制它 - 所以它一定与我在本地主机上运行（通过 MAMP）有关。为什么会出现这种情况的想法绝对为零，但至少它似乎不会在生活环境中影响我
使其全屏显示并调整窗口大小。它在 Chrome 中适用于我，并且中间没有显示“不起作用”。
.works {
display: none;
}
.does-not-work {
display: block;
}
@media(max-width:767px){
.works {
display: block;
}
.works::before {
content: 'max-width: 767px | ';
}
.does-not-work {
display: none;
}
}
@media(min-width:768px){
.works {
display: block;
}
.works::before {
content: 'min-width: 768px | ';
}
.does-not-work {
display: none;
}
}<span class="works">works</span>
<span class="does-not-work">does not work</span>旁注，基于评论：大约一年前，我在一个巨大的网站上遇到了同样的问题。6人团队近两年工作的成果。代码从四面八方涌来。我负责将前端粘合在一起，并确保一切正常工作。你可以想象@media查询是一团糟。我只是通过使用移动优先原则重构所有查询来摆脱该错误 - 我使用Bootstrap 的确切顺序对@media所有查询进行分组。为我修好了。直到今天我也不知道是什么原因造成的。它在（确切地）和之前（稍微）破损了。768px992px