Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
hasVBar="";hasHBar="";
$(document).ready(function() {
    if ($(document).height() > $(window).height()) {
       hasVBar="y";    }
    if ($(document).width() > $(window).width()) {
        hasHBar="n";    }});
</script>

<script type="text/javascript">
<!--
cUA="";
window.onload=function starterJobs(){
chkBrowser();setMidSecStart();}

// chk browser
function chkBrowser(){
if(navigator.appName=="Microsoft Internet Explorer")
{cUA="ie";} else {cUA="oth";}
} // ends chkBrowser()

// starting of body matter section
function setMidSecStart(){
if(cUA=="ie")
{
//document.getElementById('gdMatter').style.top='150px';
}
else{}} // ends chkBrowser()
-->
</script>

<style type="text/css">
        * {
           border:                      0;
        margin:                     0;
        padding:                    0;
        outline:                    none;
    }
    body {
            background-color:           #5e0305;
        font-family:                Arial, Helvetica, sans-serif;
        font-size:                  12px;
        color:                      #999;
        line-height:                16px;
        }
         #gdtrunk {
        background:transparent url(../images/mbb.png) repeat-x; 
    }

    .wrapper {
        width:                      1000px;
        margin:                     0 auto;
        }

    #topbar {
        background:                 transparent url(../images/mbb.png) repeat-x; /* menu bar base*/
        height:                     62px;
        overflow:                   visible;
        position:                   relative;
        z-index:                    3;
    }

    #topbar #itmlogo {
        float:                      left;
        list-style:                 none; 
                }

    #topbar #menuTop {
        float:                      right;
        height:                     55px;
        background-color:           transparent;
    }

    #topbar ul#menuTop {
        list-style:                 none;
    }

    #topbar ul#menuTop li {
        float:                      left;
        text-align:                 right;
    }
    #topbar ul#menuTop a {
        float:                      left;
        display:                    block;
        width:                      110px;
        height:                     42px;
        padding:                    14px 7px 0px 0px;
        text-transform:             uppercase;
        text-decoration:            none;
        font-weight:                bold;
        font-size:                  12px;
        color:                      #000;
        letter-spacing:             1px;
    }

</style>

</head><body>
<div id="gdtrunk" >
  <div class="wrapper">
    <div id="topbar" style="clear:both;"><a name="top"></a>
      <div id="logobox">
        <ul id="itmlogo">
          <li><a href="http://www.e.com/"><img id="top-logo" src="./images/logo1.png" alt="eLogo" title="e Logo" width="180px"; height="198px;" /></a> </li>
        </ul>
          </div>
      <div id="menubox">
        <ul id="menuTop">
          <li>
              <a onclick="getLink('home'); return false" href="./inmaking.html" onmouseover="status=''; return true;" >home</a>
          </li>
        </ul>
      </div>
    </div>
 </div>

<div class="wrapper" >

<div id="gdMatter" style="background-color:#CCCCCC; position:relative; clear:both; top:10px; height:auto; padding:25px;padding-left:75px;">
<!-- Graphic Designing starts  -->
<div style="background-color:transparent; position:relative; top:0px; left:0px; height:300px;overflow:hidden;">

<div style=" position:relative; top:0px; left:0px; background:transparent; width:auto; height:10px; padding:20px 0px 20px 0px;">
<div style="position:relative; top:0px; left:0px; background:transparent url(butSquare1.gif) no-repeat; width:10px; height:10px; border:white solid 1px;"></div>
<div id="printing1" style="position:relative; top:-20px; left:25px; background-color:transparent; width:auto; height:20px; padding-top:5px; margin-right:25px;">Graphic Designing    </div>
</div>

<div style="position:relative; top:0px; left:0px; background-color:transparent;" >
    <div id="abtgd1" style="background-color:#897656; position:relative; top:0px; left:0px;z-index:5; padding:10px 25px 20px 25px; height:225px; margin-left:0px; color:#c4baaa" class="h1text1">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.
    </div>
</div><!-- abtgd123 ends -->
</div><!-- Graphic Designing ends-->
</div> <!-- gdMatter -->
</div><!-- wrapper 2nd closed-->
</div><!-- gdtrunk -->
</body></html>

已修改以添加指向jsfiddle demo的链接，由OP在@JapanPro's answer的评论中链接到。{/ p>

Answer 1

这实际上是你的代码

<div class="div1">
    <div class="div2">
        <div class="div3" style="height:62px;">
            <img src="" style="height:200px;">
        </div>
        <div class="div4" style="clear:both">test</div>
    </div>
</div>

现在问题应该是如何在所有浏览器中获得相同的结果

<div class="div1">
    <div class="div2">
        <div class="div3">
            <img src="" style="height:200px;display:block">
        </div>
        <div class="div4">test</div>
    </div>
</div>

使用此代码将在浏览器中提供相同的结果。

在ff和ie中的css div问题

1 个答案: