dd div在Chrome中显示正确的保证金，但在Firefox中已被破坏

Question

我的常见问题解答页面有问题： http://www.simplypsychics.com/booking.html

问题的定位是正确的（可接受的可能是一个更好的词），但是当我在Firefox中查看它时，它向右浮动太多了：

有谁知道我需要改变哪些代码？ 我尝试了填充和边距，但它在Chrome中混乱了。

我也尝试过将元素添加到＆＃39;元素＆＃39;除了在Firebug中之外没有任何欢乐！

希望有人可以提供帮助。

这是我使用的HTML代码：

<div class="headerstandard">Important Information before you begin your application!</div>
<div id="faq">                               
<div id="faqSection">
<dl>        
<dt>How do I apply to join SimplyPsychics.com?</dt>
<dd>To join our team, you must complete an online application. Unfortunately we don't send application forms in the post.</dd>
</dl>
</div></div></div>

这是我的CSS：

#faq{
width:100%;
background-color: #fcf6ff;
border-radius: 5px;

}

#faqSection{
text-shadow:1px 1px 0 white;
}

.headerstandard{
color:#9a3ba8;
font-size:22px;
margin-top:14px;
position:relative;
border:1px solid transparent;
}   
dt{
color:#8F9AA3;
font-size:18px;
padding: 10px;
position:relative;
cursor:pointer;
border:1px solid transparent;
}

dt:hover{ color:#9a3ba8;}

dt.opened { background-position:left bottom;}

dd{
font-size:14px;
color:#717f89;
line-height:1.5;
padding:0px 15px 0px 15px;
width:95%;
display:none;
-webkit-margin-start: 0px !important;
}

Answer 1

在Firefox中使用它，似乎DD元素有额外的余量。您可以使用boxmodel view of Firefox web developer tools注意到它。添加它应该这样做：

dd {
    margin-left:0;
    ...
}

Answer 2

在这种情况下，似乎Firefox（Gecko）正确并保持为dd定义的default style并添加margin-left: 40px样式属性。

在Fiddle中进行了测试，Chrome中确认了符合非标准的行为。您可以通过在CSS或内联中强制使用不同的边距来克服此问题。

Answer 3

有人回答了这个，但他们的回答被删除了！ :( 在调用样式表之前，我进行了CSS重置并将此代码应用于文档的标题。它也用铬固定了它：

dl, dt, dd {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}