css - 为什么除 Firefox 之外的所有浏览器中这个跨度都是粗体？

Question

我正在处理的页面有时会在 div 中以粗体显示一个 span，而在其他页面中，它会使用相同的标记以不加粗的方式显示它。

好(产品详细信息以粗体显示)- Screenshot

<div class=infoPanel><span>Product Details</span><br /><ul><li>7.7% APR for loans between &pound;7,500 to &pound;14,999 for up to 5 years</li><li>Available if you are a main FlexAccount customer</li><li>No obligation quotes</li><li>Quotes tailored to your individual circumstances and the amount you would like to borrow</li><li>Quick decision on your loan application</li><li>Between 1 and 7 years repayment terms available</li><li>A fixed rate for the term of your loan</li><li>No hidden fees or charges</li><li>For the first month no repayments have to be made</li></ul></div>

差(产品详细信息不是粗体)- Screenshot

<div class=infoPanel><span>Product Details</span><br /><ul><li>Easy to apply and you will get a decision in minutes</li><li>Receive your cheque in 24 hours</li><li>Protect your personal loans against the things that worry you </li><li>Apply for an instant personal loan online today</li></ul></div>

实际页面为here .

这只发生在 Firefox 中。在所有其他浏览器中，“产品详细信息”的两个实例都是粗体。我没有看到任何可能影响样式的周围父 HTML 元素。

知道为什么会发生这种情况吗？

Answer 1

我找到了问题，但它不是很好。我不知道您使用的是什么 Javascript voodoo，但想出这种糟糕 的代码需要一些严肃的技巧。

<div style="position: absolute; z-index: 1010; left: -250px; top: 0px; width: 250px; visibility: hidden;" id="tOoLtIp032">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#666666" width="250" style="background: none repeat scroll 0% 0% rgb(102, 102, 102);"><tbody><tr><td><table cellspacing="2" cellpadding="5" border="0" width="100%">
<tbody><tr>
<td bgcolor="#ffffff" align="left" style="text-align: left; padding: 5px;"><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
</font>
<div class="infoPanel"><span>


<font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">Product Details</font>


</span><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
<br></font><ul><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
<li>7.7% APR for loans between £7,500 to £14,999 for up to 5 years</li><li>Available if you are a main FlexAccount customer</li>
<li>No obligation quotes</li>
<li>Quotes tailored to your individual circumstances and the amount you would like to borrow</li><li>Quick decision on your loan application</li>
<li>Between 1 and 7 years repayment terms available</li><li>A fixed rate for the term of your loan</li><li>No hidden fees or charges</li>
<li>For the first month no repayments have to be made</li></font></ul></div><font color="#000000" face="verdana,arial,helvetica,sans-serif" style="color: rgb(0, 0, 0); font-family: verdana,arial,helvetica,sans-serif; font-size: 10px; font-weight: normal;">
</font></td></tr></tbody></table></td></tr></tbody></table></div>

是的。这就是工具提示框在代码中的样子。那将是两个，我重复一遍，两个 由您的恶意脚本生成的嵌套表。现在问题很明显了:有问题的 span 被包装在一个 font 标签中(shivers)，带有一个 font-weight: normal 样式属性.

现在让我一个人静静地思考我所做的一切是我应得的。 颤抖