usuwanie przestrzeni między pionowymi divami

Question

Mam trzy wyrównane pionowo divy jeden na drugim. górna i dolna są tylko pokazano obraz na górze i na dole koordynacji gracz .hence staje się ten

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

teraz jest biała linia/przestrzeń pomiędzy środkowym div na jego górnej i dolnej części. Jednak wyraźnie ustawiłem marginesy i pendings i granice na zero, ale nadal nie ma rozwiązania.

Ten problem nie występuje w IE6/IE7/IE8 itp., Ale w innych przeglądarkach.

Dzięki temu, że bobince działa na górnej stronie obrazu, wykonując pionowe wyrównanie: dolne, ale nie działa dla dolnego obrazu. kogo próbuję umieścić na górze.

ok oto kod detal

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

:) teraz jego pracy we wszystkich z wyjątkiem IE jest lol, po skonfigurowaniu line-height

Answer 1

Obraz siedzi na linii tekstu w polu inline . Dodaj tekst po lewej i po prawej stronie obrazu, aby to zweryfikować. Poniżej linii bazowej tekstu znajduje się miejsce, aby zrobić miejsce dla liter "malejących" ("g", "y" itd.), Jak również odstępów między wierszami.

Ustaw styl CSS obrazu jako "wyrównanie w pionie" na "górny" lub "dolny" (stosownie do potrzeb), aby dopasować go do krawędzi linii tekstu zamiast linii bazowej.

Answer 2

Po prostu ustaw właściwość line-height swoich górnych i dolnych elementów div na 0.

Przykładowy 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

Możesz dać obraz display: block. Możesz też wykonać zdjęcie za pomocą <br/> lub owinąć je w div (upewnij się, że nie ma białego spacji). W tym przypadku wolałbym używać display: block, chyba że z jakiegoś powodu musiałbyś umieścić razem 2 obrazy.

Answer 4

Jeśli działa we wszystkich przypadkach z wyjątkiem IE, istnieje błąd IE, który występuje, jeśli po tagu graficznym istnieje biały znak. Spróbuj tego:

<div> 
    <img /></div> 

zamiast tego:

<div> 
    <img /> 
</div>