Question

在IE和FireFox中查看http://keramed.com。

在FireFox中，它看起来如我所料。在IE中，主要块进一步下降，我没有看到它。

这是CSS：

div#BoxHouse {
  margin-left: 0px; /* 72 */
  margin-right: 25px;
}

div.FloatingBox {
  text-align: center;
  float: left;
  width: 205px; 
  border: 1px solid #6C5C3B;
  padding: 0px 0px 5px 0px;
  background-image: url(transwhite.png);
  margin-left: 0.5em;
  margin-bottom: 30px;
}

div.FloatingContent {
  text-align: center;
  float: left;
  width: 90%;
  border: 0px solid #6C5C3B;
  padding: 0px;
  background-image: url(transwhite.png);
  margin-left: 0.5em;
}

#content {
  width: 90%;
  height: auto;
  background: url(transwhite.png);
  border: 1px solid #3F4933;
  margin-left: 35px; /* 72 */
  margin-right: 20px;
  margin-top: 8px;
  margin-bottom:20px;
  padding: 5px 0px 5px 0px;
  z-index: 1;
  overflow:auto;
  top: 5em;
  padding-top: 5px;
  }

#leftnavigation {
position : fixed;
height : auto;
top : 10%;
left : 0;
width : 30%; /* 40 */
margin : 0px 0px 0px 1px;
color : #000000;
padding : 0px;
overflow : auto;
}

#columncontent {
position : fixed;
top : 10%;
bottom : 100px;
margin : 40px 0px 0px 220px;
width : 80%;
height : auto;
padding-left : 5px;
padding-right : 12px;
color : #000000;
border-left : 1px solid #6C5C3B;
overflow : auto;
}

代码是：

<div id="leftnavigation">
  <div id="BoxHouse">
     <br /><br /><br /><br /><br />
            <div id="Box1" class="FloatingBox">
                <span class="legend"><a name="announcements">Announcements</a></span>
                <?php include 'announcements.inc'; ?>
            </div>

            <br /><br /><br /><br /><br /><br />
            <div id="Box2" class="FloatingBox">
                <span class="legend"><a name="news">News</a></span>
                <?php include 'othernews.inc'; ?>
            </div>
            <br /><br />
        </div>
    </div>

    <div id="columncontent">
        <br />
        <div class="FloatingContent">
            <div id="container">

                    <!-- Main tabs across the top -->
                    <ul>
                        <li><a href="#Home"><span>Home</span></a></li>
                        <li><a href="#Products"><span>Products</span></a></li>

                        <?php
                            if ($_SESSION['ALLOWORDERING'] == "TRUE")
                                { ?> 
                                    <li><a href="#Ordering"><span>Ordering</span></a></li>
                        <?php } ?>

                        <li><a href="#AboutMain"><span>About KeraMed</span></a></li>
                        <li><a href="#MyKeramed"><span>My KeraMed</span></a></li>
                    </ul>


            </div>

        </div>
    </div>

我不知道为什么会这样！

Answer 1

您没有Doctype，这会触发Quirks Mode，这会导致浏览器行为不一致。在Quirks模式下处理浏览器之间的布局问题要困难得多。

添加触发标准（AKA严格）模式和validate HTML的文档类型。这可能无法解决您的所有问题，但（正如Pekka所说），这是最明智的起点。

我建议：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

放弃layout tables，滥用多个<br>元素作为margins以及其他表示性标记也是明智之举。

CSS问题，我不明白

1 个答案: