奇怪的HTML5切片图片保证金顶部和底部问题

问题描述：

将HTML4与HTML5进行比较时，在将切片图片放到我的网站时遇到了一个奇怪的问题。奇怪的HTML5切片图片保证金顶部和底部问题

请参见下面的示例页面：

正如你可以在HTML5版本中看到，不必要的利润率出现在的图像边缘顶&底部，并且无法删除通过CSS覆盖。如何使HTML5版本看起来与HTML4版本相同（在这种简单的情况下）？

p.s.这两个文件的唯一区别是标头DOCTYPE声明。

答

将img {vertical-align: bottom;}添加到您的CSS。

宾果！但为什么需要此修复？ – Raptor 2012-01-04 05:36:52

因为默认情况下图像与文本对齐，这意味着它们必须允许字符之下的空格用于诸如'q'的字母。使用“底部”作为对齐将图像对齐到线条的底部。唯一会遇到问题的是如果图像高度小于文本的高度（'line-height'属性）。 – 2012-01-04 05:38:14

答

尝试从表中删除高度&宽度& IMGS

没有工作，对不起。 – Raptor 2012-01-04 05:36:59

答

添加img { display: block; }到你的CSS。 HTML5会导致浏览器呈现内嵌内容与HTML4略有不同。