2010-08-16 36 views
2

我正在處理的一個頁面有時在粗體內顯示span,而在其他頁面中,它顯示的是未標記相同標記的頁面。爲什麼在除Firefox之外的每個瀏覽器中都會使用粗體顯示?

好(產品詳細資料爲粗體) - 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元素。

任何想法,爲什麼會發生這種情況?

+0

使用Firebug發現區別。可能與在你的css中用作選擇器的父代有關。 – jerone 2010-08-16 15:17:53

+0

問題(和它真的很討厭)是他似乎在使用內聯行爲,這意味着懸停框的HTML從不顯示(除'onmouseover'屬性外) – 2010-08-16 15:22:03

+0

是的,Firebug是我嘗試的第一件事。內聯HTML無法定位,因爲它位於onmouseover。而且,如果我更改onmouseover中的HTML,彈出窗口不會再顯示,除非我重新加載頁面,因爲Firebug似乎不允許實時編輯Javascript。 – 2010-08-16 15:30:13

回答

8

我發現了問題,但它不是漂亮。我不知道你使用的是什麼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標記(寒冷)與font-weight: normal樣式屬性。

現在讓我一個人待着,而我想到我已經做了什麼值得擁有的東西。 Shiver

+0

該死!這很骯髒。幸運的是,我沒有寫這個邪惡的代碼。但希望我能成爲解決它的人!謝謝Yi。 – 2010-08-16 15:43:39

+3

當我查看[weather.com小部件](http://www.weather.com/services/oap.html)生成的HTML時,我正在進行閃回......單列表格和嵌套表格那麼應該讓你的瀏覽器停止渲染,並顯示一條只說「......不」的消息。 – 2010-08-16 15:49:18

+0

嗯......這個醜陋的HTML是由wz_tooltip庫生成的。 – 2010-08-16 17:03:42

1

我用FF 3.6.2查了一下,注意到即使在第二個列表並不是粗體而第三個出現的時候。這意味着您的標記中存在一些問題。確保您在所有情況下都指定了正確的標記。

你也可以嘗試這個CSS:

div.infoPanel span{ 
    font-weight:bold; 
} 
相關問題