在IE/Safari中不存在正確的填充

我在每個頁面的主要元素上都有填充：0 40px 0 40px。在IE/Safari中不存在正確的填充

在鉻中，佈局與正確的填充看起來正確。這裏的圖像顯示了使用開發人員工具的正確填充。 http://imgur.com/BButZht,TuOHanN

但是，在IE和Safari瀏覽器中，填充不存在，文本/圖像被轉移到外部主體元素。 http://imgur.com/BButZht,TuOHanN#1

我無法弄清楚爲什麼會發生這種情況。 IE開發者工具對我來說幫不了多少

主頁和類別頁面的填充問題相同。 www.luminoto.com

感謝

嘿，你可以提供一個鏈接到現場版嗎？也許jsfiddle？或者給我們一些代碼或其他東西！我的想法是它與「盒子大小」有關。在那些讓你悲傷的元素上，嘗試添加'box-sizing：border-box;'... IE是pooper。 – philtune 2014-11-20 22:05:53

IE沒有display:block在其瀏覽器的樣式表爲main元素，所以你必須明確添加在你的樣式 - 否則它只會被視爲inline元素（並且所有內容都會「流出」它）。

您可以直接將它添加到.photo_main的格式中 - 儘管更好的做法是在「重置」樣式表中進行，以便平衡這些瀏覽器差異。

不確定Safari是否面臨同樣的問題，但請試一試，看看它是否也解決了這個問題。

2014-11-20 22:18:25 CBroe

謝謝。在看到這個之前，我確實得到了代碼導師的幫助，這正是解決方案。我用display：inline-block。 – 2014-11-21 22:47:33

回答