2011-11-21 61 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代码...尤其是如果您使用严格的文档类型 –