2009-11-23 48 views
0

我想在CSS中製作嵌套框,並在整個事物中放置一張圖片(或一個Flash電影)。問題是IE至少在圖片下面添加了一個750 x 4大小的空白空間。有沒有辦法擺脫那個空的空間?如何嵌套這些盒子?

我該如何更改下面的代碼?

<div style="border:solid 4px #FFFFFF; width:768px;"> 
 
    <div style="border:solid 1px #E6E6E6;"> 
 
    <div style="border:solid 1px #FFFFFF;"> 
 
    <div style="border:solid 1px #CCCCCC;"> 
 
    <div style="border:solid 1px #FFFFFF;"> 
 
    <div style="border:solid 1px #E6E6E6;"> 
 
    <div> 
 
    <img src="test.gif" width=750px; height: 138px;> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

回答

2
<img src="test.gif" width=750px; height: 138px;> 

你必須在該行(寬度和高度的部分)一些無效的HTML。嘗試是這樣的:

<img src="test.gif" style="width:750px; height: 138px;"> 

Ofcourse,正確的方法是擺脫所有內嵌CSS樣式,用類名和ID的替換它們,並通過CSS定義類的樣式。

+0

IMG標籤確實支持寬度/高度屬性,但是,與;和'px'它仍然無效。 – 3zzy 2009-11-23 07:46:34

+0

內聯樣式是不好的做法,特別是當圖片標籤支持寬度和高度屬性時。看到我的答案。 – 2009-11-23 09:30:16

0

嘗試:

<div style="border:solid 4px #FFFFFF; width:768px; overflow:hidden;"> 
<div style="border:solid 1px #E6E6E6;"> 
<div style="border:solid 1px #FFFFFF;"> 
<div style="border:solid 1px #CCCCCC;"> 
<div style="border:solid 1px #FFFFFF;"> 
<div style="border:solid 1px #E6E6E6;"> 
<div style="overflow:hidden;"> 
<img src="test.gif" width=750px; height: 138px;> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
0

使您的代碼有效:

<img src="test.gif" width="750" height="138" /> 

圖像標籤支持的寬度和高度,但並不需要的像素只是價值。

嘗試使用樣式表,內聯樣式是不好的做法。

+0

你還打開6個divs並關閉8個。 – 2009-11-23 09:41:25