Почему этот диапазон выделен жирным шрифтом во всех браузерах, кроме Firefox?

Question

Страница, над которой я работаю, иногда отображает промежуток внутри div, выделенный жирным шрифтом, в то время как на других страницах она отображается жирным шрифтом с той же разметкой.

Хорошо (информация о товаре выделена жирным шрифтом) - Снимок экрана

<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>

Плохо (Сведения о продукте НЕ выделены жирным шрифтом) - Снимок экрана

<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>

Фактическая страница здесь .

Это происходит только в Firefox. Во всех других браузерах оба экземпляра «Сведения о продукте» выделены жирным шрифтом. Я не вижу окружающих родительских элементов HTML, которые могли бы повлиять на стиль.

Есть идеи, почему это произойдет?

Answer 1

Я нашел проблему, но это не красиво. Я не знаю, какой Javascript voodoo вы используете, но написание этого кода bad требует серьезного дурака.

<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 (дрожь) с атрибутом стиля font-weight: normal.

А теперь оставь меня в покое, пока я размышляю над тем, что я сделал, чтобы заслужить это. Дрожь

Answer 2

Я проверил это с FF 3.6.2 и заметил, что даже в этом случае второй листинг не выделяется жирным шрифтом, а третий - нет. Это означает, что в вашей разметке есть проблема. Убедитесь, что вы указали правильную разметку во всех случаях.

Вы также можете попробовать этот CSS:

div.infoPanel span{
  font-weight:bold;
}