Question

我的页面下面有html。我需要在zoom_controls类下面的chart_div。以下代码适用于IE和Chrome，但在Firefox上，chart_div正在页面上移动。可能导致这种情况的任何想法？

<div id="tab10">
    <div id="container">
        <table>
            <tr>
                <td>
                    <div class="zoom_controls"> <a class="profile" style="width: 100px;" id="volume_d" href="#" data-chart="line" data-range="1m">Volume</a>
 <a class="profile" style="width: 100px;" id="Total" href="#" data-chart="line" data-range="1m">Total</a>

                    </div>
                    <div id="chart_div" style="width:700px; height:300px;"></div>
                </td>
            </tr>
        </table>
    </div>
</div>

这是我的css文件：

<style type="text/css">
.zoom_controls a {
    display: block;
    width: 80px;
    height: 16px;
    line-height: 16px;
    margin-top: 3px;
    float: left;
    text-decoration: none;
    color: black !important;
    text-align: center;
    border: 1px #CCC inset;
    /* Should look a lot like the original :) */
    background-image: linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
    background-image: -o-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
}
.zoom_controls a.active {
    background-color: #a6d1ff;
    background-image: linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
}
body {
    font: 10px arial;
    text-align:center;
    width: 100%;
    background: #F9F8F6;
    margin-top:0;
    border:0;
}
#top {
    background: white;
    margin-top:0;
}
table {
    border-collapse:collapse;
    border: 0;
    margin:0 auto;
}
table caption {
    text-align: left;
    color: #00006E;
    font-weight:bold;
    font: 15px arial;
}
table td {
    border: 0px;
}
#header {
    text-align: center;
    font: 12px sans serif;
}
#logo {
    float: left;
}
hr {
    background-color: #00006E;
    border: 0 none;
    color: #00006E;
    height: 4px;
}
.tabs li {
    list-style:none;
    display:inline;
}
.tabs a {
    padding:5px 10px;
    display:inline-block;
    background:#C0C0C0;
    color:#000;
    text-decoration:none;
    text-align: center;
    font: 18px sans serif;
    font-weight: bold;
}
.tabs a.active {
    background:#6E6EFF;
    color:#fff;
}
h1 {
    font: 25px sans serif;
    font-weight: bold;
}
</style>

http://jsfiddle.net/isherwood/QphhM/1/

Answer 1

在你的

中

<div id="chart_div" style="width:700px; height:300px;"></div>

在样式属性中添加clear:both，即

<div id="chart_div" style="width:700px; height:300px;clear:both"></div>

Answer 2

放手一搏：

#chart_div {clear: left;}

http://jsfiddle.net/isherwood/QphhM/2/

在firefox中将div显示在彼此之上

2 个答案: