dikey boşluklar arasındaki boşluk kaldırılıyor

Question

Birbirlerinin üstünde üç dikey hizalanmış div var. Üst ve alt sadece oyuncu .hence koordinasyon üstünde ve altında bir resim gösteriyor artık üst ve altta ortadaki div arasında beyaz çizgi/boşluk olduğundan bu

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

gibi olur. Bununla birlikte, açık bir şekilde marjları ve ipleri ve sınırları sıfır olarak ama yine de hiçbir çözüme ayarlamam.

Bu sorun IE6/IE7/IE8'de değil, diğer tüm tarayıcılarda ortaya çıkmamaktadır.

Bobince, en üstteki resim tarafında dikey hizalama yaparak çalışıyor: altta ancak alt görüntü için çalışmıyor. kime yerleştirmeye çalışıyorum. Burada Tamam

detay kodu

<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> 

olduğunu :) şimdi onun bir görüntü bir satır içi kutusunun metin başlangıca oturur çizgi yüksekliği

Answer 1

kurduktan sonra, tüm IE en lol dışında çalışan . Bunu doğrulamak için görüntünüzün soluna ve sağına metin ekleyin. Metin taban çizgisinin altında, harfler arası inişlere (‘g’, ‘y’ vb.) Ve satır aralıklarına yer açmak için boşluk vardır.

Görüntünün CSS stili ‘dikey hizalama’, satır başı yerine bir metin satırının kenarına hizalanmasını sağlamak için ‘üstü’ veya ‘aşağı’ (uygun olduğunda) gibi bir değere ayarlayın.

Answer 2

Üst ve alt divlarınızın line-height özelliğini 0'a ayarlamanız yeterlidir.

örnek kod:

<!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

görüntüyü display: block verebilir. Alternatif olarak, görüntüyü <br/> ile takip edebilir veya bir div içine sarabilirsiniz (beyaz boşluk olmadığından emin olun). Bu durumda, bir sebepten dolayı 2 görüntüyü birleştirmeniz gerekmedikçe display: block'u kullanmayı tercih ederim.

Answer 4

IE dışında herhangi bir yerde çalışıyorsa, bir görüntü etiketinden sonra boşluk varsa, bir IE hatası oluşur. Bu deneyin: bunun yerine

<div> 
    <img /></div> 

:

<div> 
    <img /> 
</div>