Question

我正在尝试创建一个包含用于在iframe中加载的图像的页面。但是身体标签底部有4px的空间，我似乎无法摆脱它。这是我的简化来源：

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

<html>
<head>
    <style>
        body, a, head, img
        {   margin: 0;
            padding: 0;
            border: none;
            border-width: 0px;
        }
    </style>
</head>

<body>
    <a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>

你会注意到如果你在窗口底部的4个像素内收缩窗口，你会得到一个滚动条。垃圾来自哪个空间？

Answer 1

图像放置在它所在的文本行的基线上。图像下方的空间是基线和字符单元格底部之间的距离，其中有空格可以悬挂像{{1 }和g。如果您的浏览器的默认字体和字体大小恰好是四个像素，那么在其他浏览器中您会得到略有不同的结果。

一种解决方案是使图像成为块元素，这样它就不是文本行的一部分，并且在基线下面没有空格。 anchor标记是一个内联元素，它不能在其中包含块元素，因此要在应用样式后使元素有意义，您还必须使锚标记成为块元素：

（为了使代码有效XHTML你还需要一个在anchor标签之外的块元素，body标签不能直接包含内联元素。使用样式使锚标签成为一个块元素没有帮助，结构有在应用样式之前也有效。）

Answer 2

所有浏览器都带有默认样式。虽然您要重置页面的标记，但CSS中没有image这样的标记。

我建议使用更全局的重置样式表。我喜欢Eric Meyer中的那个。像这样简单的东西可以帮助平衡浏览器之间的竞争环境。

Answer 3

用你风格的img替换图片

Answer 4

将“a”和“img”标记放在div这样的

中

<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>

Answer 5

这是Hallie的答案的后续内容，这是一个完整的工作示例，已经通过多种方式进行了更新，使其实际上符合XHTML 1.0 Transitional并且不显示空格。确保不要在＆lt; / a＆gt;

之后引入空格

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

<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
<title>This is the title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css"> 
body, a, head, img 
{   
    margin: 0px; 
    padding: 0px; 
    border: none; 
    border-width: 0px; 
} 
</style> 
</head>
<body> 
    <div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div>
</body> 
</html>

Answer 6

所有互联网浏览器都有一些填充，它们会添加到页面本身。摆脱它的一种可靠方法是简单地从每个元素中获取所有边距和填充。

*
{
    margin: 0px;
    padding: 0px;
}

当然，这会删除页面上每个元素的边距和填充，因此请谨慎使用，在需要填充和边距时覆盖此默认值（每个其他选择器的优先级高于这个全球性的，所以很容易做到。）

如何摆脱IE页面底部的空间

6 个答案: