2011-11-21 65 views
0

Somehow the a href is also surrounding the 'update' image but the href is clearly closed with a </a> tag. It is in a list <li> but I don't see how or why this is happening. Has anyone ran into this before where the link tag is surrounding multiple elements?<a href> tag surrounding multiple elements somehow

<a href="cart.php?delete"> 

<img border="0" src="post_delete_icon.png"> 
</a> 
<br> 
<br> 
<input type="hidden" value="1" name="item_qty[96]" size="4"> 
<input id="qtyx" type="text" value="1" name="qtyx" size="4"> 
<input type="hidden" value="96" name="productidx"> 
<input type="image" border="1" src="update.png"> 

回答

2

Which doctype are you using?

Based on your markup, you should be using the HTML5 doctype. If you are unfamiliar with this, place it at the top of your html markup.

<!DOCTYPE html> 

and modify your code to:

<a href="cart.php?delete"> 
    <img src="post_delete_icon.png" alt="delete item"> 
</a> 

<br> 
<br> 
<input type="hidden" value="1" name="item_qty[96]"> 
<input id="qtyx" type="text" size="4" value="1" name="qtyx"> 
<input type="hidden" value="96" name="productidx"> 
<input type="image" src="update.png" alt="update cart"> 

Edit:
Since you are using the strict doctype, you need to end your tags and follow the strict doctype rules. Run your code through an XHTML/HTML markup validator爲了確保你的代碼是兼容的。

因爲你正在編寫HTML標記,你要使用下面的doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

完成這一步之後,您需要將您的代碼中刪除所有border="0"屬性。這些類型的東西在使用strict文檔類型時爲CSS保留。除嚴格的文檔類型外,您需要爲<img>標籤提供alt值。這是爲了提高可用性和排序容錯,如果圖像不加載。

您也可以使用您正在使用的XHTML文檔類型,但爲了遵循這些規則,您將不得不更改標記。每個doctype都有它自己的規則,並且在項目中間更改doctype可以完全改變瀏覽器呈現頁面的方式。

有效的XHTML嚴格代碼:

<a href="cart.php?delete"> 
    <img src="post_delete_icon.png" alt="delete item"></img> 
</a> 
<br /> 
<br /> 
<input type="hidden" value="1" name="item_qty[96]"></input> 
<input id="qtyx" type="text" value="1" name="qtyx" size="4"></input> 
<input type="hidden" value="96" name="productidx"></input> 
<input type="image" src="update.png"></input> 
+0

<!DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Strict // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd」>是我的使用 – user1058275

+3

這是你的問題。在嚴格的文檔類型中,您必須關閉所有標籤。 ''無效。它必須是''你的瀏覽器堅持使用嚴格的規則,但是你的代碼並沒有遵循它們,所以瀏覽器試圖「修復」一些事情,並進一步破壞它們。 –

+0

使用http://validator.w3.org/check驗證您的HTML代碼...尤其是如果您使用嚴格的文檔類型 –