两端“弱智”的HTML代码

最新推荐文章于 2025-06-25 15:25:19 发布

转载最新推荐文章于 2025-06-25 15:25:19 发布 · 161 阅读

·

0

·

文章标签：

本文通过一个具体的案例探讨了在不同浏览器（IE与Firefox）中，HTML代码中空格的解析差异及其产生的视觉效果的不同。文章揭示了一个常见但容易被忽视的问题——即浏览器对HTML标签间空格的不同处理方式可能导致页面布局出现意料之外的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天手动添加了一段html代码，没想到确出现了让人”百思不得其解“的意外，看下面一段html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#990099">

<tr>

<td><img src="images/bar1.gif" alt="" width="200" height="38" />

</td>

<td><img src="images/bar2.gif" alt="" width="136" height="38" />

</td>

<td> 

</td>

</tr>

</table>

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFF00">

<tr>

<td><img src="images/bar1.gif" alt="" width="200" height="38" /></td>

<td><img src="images/bar2.gif" alt="" width="136" height="38" /></td>

<td> </td>

</tr>

</table>

</body>

</html>

在IE中浏览：

在FireFox中浏览：

两端代码几乎一样的代码确在不同浏览器中出现了迥然不同的效果，而这种区别又是如此的总要，因为我们常常这样来拼接切割后的图片。

其实，仔细观察就会发现，两端html唯一不同的就是第一段中<img/>是换了行之后才跟</td>，而第二段代码<img>是紧跟</td>的，正是如此，IE认为第一段代码<img>和</td>产生了空格（虽然有无限个空格，但只解析为一个），导致出现了占位符，而FireFox忽略不计。

本来是认为代码1，风格比较好，树桩对齐，没想到浪费了我一个多小时的调试。^^||

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。