當我打開IE開發者工具時CSS意外改變

我目前正在測試IE8上的一個站點（在虛擬機上運行）。當我打開IE開發者工具時CSS意外改變

該網站使用了一些背景圖片內：前後：

@media (min-width: 980px) { 

    .box:after { 
     ... 
     background: url('../images/assets/home-create-background.png') bottom right no-repeat; 
     ... 
    } 
}

我使用respond.js提供媒體查詢IE8的支持：元素，這是一個媒體查詢中後。媒體查詢中的規則在頁面加載後立即應用（即：respond.js實際上正在工作）。但是，此圖像不顯示。

有趣的事情：如果我打開IE開發工具（例如按F12），圖像突然顯示。

任何人都經歷過類似的事情？你們有什麼想法或方向去探索嗎？

編輯： 我終於能夠解決這個問題，將內容添加到：僞元素（我已經將這個規則，但畢竟不是媒體查詢，出於某種原因裏面，它並不適用於IE）

.box:after { 
     ... 
     background: url('../images/assets/home-create-background.png') bottom right no-repeat; 
     content: " "; 
     ... 
    }

在任何情況下，我認爲這是有趣知道爲什麼，當我打開開發工具的佈局發生了變化......

來源

2013-03-18 Luis Evrythng

您是否會爲您的問題添加一個小測試用例？ – 2013-03-18 12:12:57

我以前見過這個問題。 – Knu 2013-03-18 12:14:14

我已經注意到它與JavaScript，所以我並不完全驚訝，看到它發生在CSS以及。非網絡人員真的不知道IE多年來給我們帶來了多少痛苦。 – Graham 2013-03-18 12:22:24

一對夫婦的痛點與IE瀏覽器可以這樣識別它是值得檢查以下內容：

任何console.log()語句將迫使IE瀏覽器不會呈現任何東西，直到顯示開發工具。
當您打開IE開發工具時，默認情況下默認的默認視圖與默認視圖不同。

來源

2013-03-18 13:33:52 Deif

+1任何console.log（）語句將強制IE不呈現任何東西，直到顯示開發人員工具 – 2013-03-18 17:39:51

1：這似乎不是我的情況（我嘗試刪除所有console.logs）的問題。但是，知道這一點非常有趣。 2：不，我正常運行在正常模式（IE8），但是，又一個好點！ – 2013-03-18 17:46:03

當我打開IE開發者工具時CSS意外改變

回答

相關問題