媒體查詢跨框架

這裏泄漏的一些HTML：媒體查詢跨框架

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe> 
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

的test.html頁面包含了一些CSS從外部文件：

<link rel="stylesheet" type="text/css" href="style.css" />

而且樣式有：

@media all and (max-width: 600px) { 
    body {background-color: red;} 
}

的上面的內容被簡化了，但足以證明這個問題：儘管其中一個頁面是c，但兩頁都是紅色的在學習上比其他人寬。 Demonstration page

什麼給了？

（注：經測試，在IE和Chrome - 鉻爲細末，用一幀紅色和其他白色）。

來源

2012-09-14 Niet the Dark Absol

哪個IE你測試這個？由於IE8以前的版本不支持媒體查詢，因此肯定無法在IE8或更低版本中使用。它只支持IE9 –

雅認爲？如果它是IE8或更低，則兩個iframe都是白色的，而不是紅色。 –

不一定。我只是嘗試了IE 7，而且這兩個頁面都是白色的。 – DayS

正如您可以在this answer中看到的那樣，Internet Explorer 9支持CSS3媒體查詢，但當包含媒體查詢的CSS位於外部文件中時，不在幀內，因此您應該將媒體查詢放在test.html頁面的頭部。以前的IE版本本身不支持媒體查詢，但您可以使用JavaScript庫（請參閱respond.js或css3-mediaqueries-js）來解決此問題。

來源

2012-09-20 19:34:45

太棒了，非常感謝！這很難找到，只是將媒體查詢放入html的主體而不是樣式表中，這使得它在IE9上完美工作。（請注意，這個錯誤只是IE9 Win7 - 不是Vista或任何其他IE版本的問題）。 –

如果這樣做不適合您，可以讓IE9通過將URL更改爲每個CSS文件，將每個CSS文件視爲單獨的實體 - 通過媒體查詢將唯一的URL參數添加到共享CSS文件。例如，主框架加載site.css，iframe加載site.css？frame = 1。同樣的效果。 – sync

@sync：真棒解決方案。我將#iefix添加到了框架的CSS中，現在它可以正常工作 – mstaessen

-1

您可以通過使用jQuery與下面的腳本做的工作：

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> 
<script> 
    $(document).ready(function() { 
     if ($(document).width() < 600) { 
      $('body').css('background-color', 'red'); 
     }; 
    }); 
</script>

來源

2012-09-19 13:36:27 DayS

真的嗎？如果我：a）完全鄙視jQuery？ b）不希望JavaScript解決這個CSS問題？ c）想要調整窗口大小？ –

呃...我同意使用jQuery不是做CSS工作的最乾淨的方法。但我甚至不確定是否可以在IE9舊版本上做到這一點。此外，您可以在調整窗口大小時調整腳本以重新計算背景。如果您發現其他解決方案，請不要忘記在此處寫入。我對此很好奇。 – DayS

嗯，是的，在這個例子中JS解決方案可以工作。然而，這是一個非常簡單的例子。可能有任意數量的元素需要調整，級聯仍然需要正確工作。 –

媒體查詢跨框架

回答

相關問題