如何阻止父div在IE7中拉伸

<style type="text/css"> 

    .parent 
    { 
     width   : 200px; 
     height   : 50px; 
     background-color : #FFFFCC; 
     overflow   : visible; 
    } 

    .child 
    { 
     width   : 255px; 
     height   : 30px; 
     background-color : #CCCCFF; 
    } 

</style> 

<div class="parent"> 
    <div class="child">Child Content</div> 
</div>

它在Firefox中正常工作，但在IE7中父div與子div拉伸。無論如何阻止IE7伸展父母的div？對於一些設計限制，div無法定位。我試圖在互聯網上搜索它，但找不到任何解決方案！在此先感謝您的時間！如何阻止父div在IE7中拉伸

我無法在此上傳圖片。您可能要檢查什麼樣子轉到下面的鏈接 http://img27.imageshack.us/img27/5876/firefoxjn.png

來源

2011-06-05 zedeye

只需在HTML的開頭添加<!DOCTYPE>即可解決問題。

如果沒有聲明DOCTYPE，Internet Explorer顯然默認爲'quirks'模式！

欲瞭解更多信息檢查， CSS quirks mode

來源

2011-06-06 04:39:55 zedeye

儘量給孩子以下樣式：

.child 
    { 
     width   : 255px; 
     position   : relative; 
     height   : 30px; 
     background-color : #CCCCFF; 
    }

來源

2011-06-05 13:38:46 Arrabi

感謝這樣快速的答案，但對於一些設計約束，沒有任何的div可以定位。 – zedeye 2011-06-05 13:39:59

您可能希望你的父容器上更改overflow:visible;到overflow:hidden;。不完全確定這是否是你想要的。

來源

2011-06-05 13:53:56 Fredrik

感謝您的輸入，但是，不，我故意使用overflow：在父內容中可見。 Firefox是按照我想要的方式進行的，但IE瀏覽器正在擴展父分區。 – zedeye 2011-06-05 15:34:51

但是，你不能只使用寬度：255px;在父容器上呢？因爲我認爲這是你唯一的選擇，除了我的和Arrabi的。 – Fredrik 2011-06-05 15:45:53

我發現這個網站http://www.quirksmode.org/css/overflow.html 它顯示了我正在努力實現的目標。根據網站它應該只在IE6中行爲不端。該網站在firefox和IE7中都可以正常工作，但是當我使用幾乎相同的代碼（如上所述）時，它會在所有IE版本中延伸父級div。 – zedeye 2011-06-05 17:02:13

如何阻止父div在IE7中拉伸

回答

相關問題