奇怪的 HTML5 切片图像边缘顶部和边缘底部问题
比较 HTML4 和 HTML5,我在将切片图像放置到我的网站时遇到一个奇怪的问题。
请参阅以下示例页面:
正如您在 HTML5 版本中看到的,图像边距顶部和顶部边距中出现了不需要的边距。底部,并且无法通过 CSS 覆盖删除。如何使 HTML5 版本看起来与 HTML4 版本相同(在这个简单的情况下)?
ps 这两个文件的唯一区别是标头 DOCTYPE 声明。
Comparing HTML4 with HTML5, I encounter a strange problem when placing sliced images to my website.
See the example pages below:
As you can see in HTML5 version, an unwanted margin appears in image margin top & bottom, and cannot be removed via CSS overrides. How to make HTML5 version look identical to HTML4 version (in this simple case)?
p.s. the only difference of the 2 files is the header DOCTYPE declaration.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
将
img {vertical-align: Bottom;}
添加到您的 CSS 中。Add
img {vertical-align: bottom;}
to your CSS.尝试删除高度和距桌子的宽度IMG
Try removing Height & Width from Table & IMGs
添加
img { 显示:块; }
到你的CSS。 HTML5 会导致浏览器渲染内联内容与 HTML4 略有不同。有关更多信息,请参阅 Mozilla 的这篇信息文章:https://developer.mozilla.org/ en/Images%2C_Tables%2C_and_Mysterious_Gaps
Add
img { display: block; }
to your css. HTML5 will cause browsers to render inline stuff slightly differently to HTML4.For more information, see this informative article from Mozilla: https://developer.mozilla.org/en/Images%2C_Tables%2C_and_Mysterious_Gaps