CSS圖像尺寸調整的問題...響應式設計

Question

我正在轉換一個網站響應時遇到與圖像尺寸jQuery的一些元素的定位問題。

請看this test site。減少瀏覽器寬度（我已設置爲768），並且在Firefox中看起來都很好。

在IE8中一切正常EXCEPT圖像的滑塊的尺寸和滑塊字幕的定位。

圖像沒有大小縮小到適合較小的視口。至於幻燈片上的元素的位置，我希望有一個解決方案，因爲我想我不能在頁面上使用IE特定的樣式，因爲它不是響應代碼的一部分......或者我可以嗎？

我不知所措！

Answer 1

我的猜測是媒體查詢CSS選擇器使用

#slider > section > deiv > div img { 
    width: 768px; 
    height: 251px; 
} 

嘗試將部分標籤切換到別的東西，或直接在CSS選擇器中選擇圖像。 IE8不支持section標籤，因爲它是一個HTML5元素，因此媒體查詢無法選擇節標籤。

你可以在CSS選擇器可能更改爲：

#slider * img { 
    width: 768px; 
    height: 251px; 
} 

的#slider * IMG選擇將獲得的元素的任何兒童/孫子與滑塊的ID。

有關節標籤訪問更多信息&瀏覽器支持：http://www.w3schools.com/html5/tag_section.asp

編輯： 做進一步的研究，它看起來像IE8不支持媒體查詢後。您可以使用其他替代方法來模擬JavaScript的媒體查詢。看看這個問題之前： IE8 support for CSS Media Query

它suggestes使用http://code.google.com/p/css3-mediaqueries-js/在IE中實現這一功能8.

它看起來比較容易實現，因爲基本上所有你要做的就是包括這個js文件在你的應用程序，你寫媒體查詢，如果它們是爲原生支持的瀏覽器編寫的話。