xóa không gian giữa các div dọc

Question

tôi có ba div thẳng đứng dọc trên đầu trang của nhau. trên cùng và dưới cùng chỉ hiển thị hình ảnh trên đầu và cuối của trình phát. phối hợp sẽ trở thành như thế này

<div> 
<img>top</img> 
<div> 
<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div> 
<img>bottom</img> 
</div> 

bây giờ có đường màu trắng/khoảng trống giữa phần giữa ở trên và dưới. Tuy nhiên tôi đặt rõ ràng lề và mặt dây chuyền và biên giới bằng 0 nhưng vẫn không có giải pháp.

Sự cố này không xảy ra trong IE6/IE7/IE8 v.v. nhưng tất cả các trình duyệt khác.

Cảm ơn bobince, nó hoạt động trên mặt hình ảnh trên cùng bằng cách căn chỉnh theo chiều dọc: phía dưới nhưng không hoạt động cho hình ảnh dưới cùng. mà tôi đang cố gắng đặt lên hàng đầu.

ok đây là mã chi tiết

<div id="top" > 
    <img alt="topimage" style="vertical-align:bottom"> 
     <xsl:attribute name="src"> 
     <xsl:value-of select="TopImage"/> 
     </xsl:attribute> 
    </img> 
    </div> 
    <div id="container" style="clear:both;display:block;margin: 0 0 0 0;padding: 0 0 0 0;text-align:left;border:0 none;"> 
    <div id="left" style="margin: 0 0 0 0;padding: 0 0 0 0;float: left;"> 
     <img alt="left image" style="margin: 0 0 0 0;padding: 0 0 0 0;vertical-align:bottom"> 
     <xsl:attribute name="src"> 
      <xsl:value-of select="LeftImage"/> 
     </xsl:attribute> 
     </img> 
    </div> 

    <div id="flashde260252-c874-4c67-b1aa-64ebe80bb701" style="margin: 0 0 0 0;padding: 0 0 0 0;float:left;border:0;vertical-align:bottom"> 
     <embed id="flashde260252-c874-4c67-b1aa-64ebe80bb7010" height="308" width="512" allowfullscreen="true" wmode="transparent" quality="high" bgcolor="#ffffff" name="flashde260252-c874-4c67-b1aa-64ebe80bb7010" style="margin: 0 0 0 0;padding: 0 0 0 0;" type="application/x-shockwave-flash"> 
     <xsl:attribute name="src"> 
      <xsl:value-of select="Movie"/> 
      <xsl:text>?flvfile=</xsl:text> 
      <xsl:value-of select ="Destination"/> 
      <xsl:text >&amp;lang=e&amp;environment=PROD</xsl:text> 
     </xsl:attribute> 
     </embed> 
    </div> 

    <div id="rightimage" style="margin: 0 0 0 0;padding: 0 0 0 0;float:left;"> 
     <img alt="rightimage" style="vertical-align:bottom"> 
     <xsl:attribute name="src"> 
      <xsl:value-of select="RightImage"/> 
     </xsl:attribute> 
     </img> 
    </div> 
    </div> 
    <!-- <div id="bcontainer" style="margin: 0 0 0 0;padding: 0 0 0 0;text-align:left;border-left:0;border-right:0;border-top:0;border-bottom:0px;border:none;">--> 
    <div id="bottom" style="clear:both;display:block;margin: 0 0 0 0;padding: 0 0 0 0;vertical-align:top;text-align:left;border:0 none"> 
    <img alt="subscribe" src="IRBBottom.jpg" usemap="#promomap" border="0" style="vertical-align:top"> 
     <xsl:attribute name="src"> 
     <xsl:value-of select="BottomImage"/> 
     </xsl:attribute> 
    </img> 
    </div> 
    <!-- </div> --> 
    <div id="toc" style="clear:both;display:block;text-align:left;"> 
    <ol style="list-style:none;font-size:small;font-weight:bold"> 
     <li>* Includes all matches from main pitch, plus selected matches from pitch 2 - see FAQ for details.</li> 
     <li>** Includes all matches on Finals Day, March 7th from main pitch - see FAQ for details.</li> 
     <li>*** All matches on main pitch will be live and matches on pitch 2 will be on demand - see FAQ for details.</li> 
    </ol> 
    </div> 
    <map name="promomap"> 
    <area shape="rect" coords="229,46,350,137" href="index.html" alt="Subscribe or Login" title="Subscribe or Login"/> 
    <area shape="rect" coords="410,47,528,137" href="XXX.html" alt="R Video" title="Ro"/> 
    </map> 
    <script type="text/javascript"> 
    <xsl:text disable-output-escaping="yes"> 
    function showMovie(player,movie,endthumb,destination){ 
    var so = new SWFObject(player+'?flvfile='+movie+'&amp;endthumb='+endthumb +'&amp;endlink='+destination,'flashde260252-c874-4c67-b1aa-64ebe80bb7010','512','308','8', '#ffffff', 'high',''); 
    so.addParam('wmode', 'transparent');so.addParam('allowfullscreen', 'true');so.write('flashde260252-c874-4c67-b1aa-64ebe80bb701'); 
    } 
    </xsl:text> 
    <xsl:text> showMovie('</xsl:text> 
    <xsl:value-of select="Player"/> 
    <xsl:text>','</xsl:text> 
    <xsl:value-of select="Movie"></xsl:value-of> 
    <xsl:text>','</xsl:text> 
    <xsl:value-of select="EndThumb"/> 
    <xsl:text>','</xsl:text> 
    <xsl:value-of select="Destination"/> 
    <xsl:text>');</xsl:text> 
    </script> 
</div> 

:) hiện đang làm việc trong tất cả ngoại trừ IE lol, sau khi thiết lập các line-height

Answer 1

Một hình ảnh ngồi trên cơ sở văn bản của một hộp inline . Thêm văn bản vào bên trái và bên phải hình ảnh của bạn để xác minh điều này. Có không gian bên dưới đường cơ sở văn bản để nhường chỗ cho hậu duệ của các chữ cái (‘g’, ‘y’, v.v.) cũng như khoảng cách dòng.

Đặt kiểu CSS 'thẳng đứng' thành một cái gì đó như 'trên cùng' hoặc 'dưới cùng' (nếu thích hợp) để làm cho nó thẳng hàng với cạnh của dòng văn bản thay vì đường cơ sở.

Answer 2

Chỉ cần đặt thuộc tính line-height của số div trên cùng và dưới cùng của bạn thành 0.

Ví dụ mã:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title>Test</title> 
    <style type="text/css"> 
     #top { 
      background-color: #f00; 
      line-height: 0px; 
     } 
     #middle { 
      background-color: #0f0; 
     } 
     #bottom { 
      background-color: #00f; 
      line-height: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="top"> 
     <img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" 
      alt="Stackoverflow" /> 
    </div> 
    <div id="middle"> 
     <div>This is the first middle div child.</div> 
     <div>This is the second middle div child.</div> 
     <div>This is the third middle div child.</div> 
    </div> 
    <div id="bottom"> 
     <img src="http://www.gravatar.com/avatar/ae3e50c947379163d74b6de6fa01d509?s=32&amp;d=identicon&amp;r=PG" 
      alt="Gripsoft avatar" /> 
    </div> 
</body> 

Answer 3

Bạn có thể cung cấp cho các hình ảnh display: block. Ngoài ra, bạn có thể theo hình ảnh với <br/> hoặc bọc nó trong div (đảm bảo không có khoảng trắng). Trong trường hợp này tôi muốn sử dụng display: block trừ khi bạn cần phải đặt 2 hình ảnh với nhau vì một lý do nào đó.

Answer 4

Nếu nó hoạt động trong tất cả ngoại trừ IE, có lỗi IE xảy ra nếu có khoảng trống sau thẻ hình ảnh. Hãy thử điều này:

<div> 
    <img /></div> 

thay vì điều này:

<div> 
    <img /> 
</div>