Css 如何在IE中消除页面底部的空白

Css 如何在IE中消除页面底部的空白,css,internet-explorer,Css,Internet Explorer,我正在尝试制作一个带有图片的页面,以便在iframe中加载。但在身体标签的底部有4倍的空间,我似乎无法摆脱。以下是我的简化来源: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> body

我正在尝试制作一个带有图片的页面,以便在iframe中加载。但在身体标签的底部有4倍的空间,我似乎无法摆脱。以下是我的简化来源:

<!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像素以内,您将得到一个滚动条。空间从何而来?

所有的互联网浏览器都会在页面上添加一些填充物。消除它的一个可靠方法是简单地从每个元素中删除所有的边距和填充

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

当然,这将删除页面上每个元素的边距和边距,因此请谨慎使用,在需要填充和边距时覆盖此默认值。每个其他选择器的优先级都高于此全局选择器,因此操作简单。

所有Internet浏览器都会在页面本身添加一点边距。消除它的一个可靠方法是简单地从每个元素中删除所有的边距和填充

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

当然,这将删除页面上每个元素的边距和边距,因此请谨慎使用,在需要填充和边距时覆盖此默认值。每个其他选择器的优先级都高于此全局选择器,因此操作简单。

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


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

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


我建议使用更全局的重置样式表。我喜欢你家的那个。像这样简单的东西有助于在浏览器之间公平竞争。

在样式上用img替换图像

在样式上用img替换图像

将a和img标记放在一个div中,如下所示

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

像这样把你的a和img标签放在一个div里

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

这是hallie回答的后续内容,下面是一个完整的工作示例,该示例已通过多种方式进行了更新,以使其实际上符合XHTML1.0过渡版,同时不显示空间。请确保在输入后不引入空格


这是hallie回答的后续内容,下面是一个完整的工作示例,该示例已通过多种方式进行了更新,以使其实际上符合XHTML1.0过渡版,同时不显示空间。请确保在输入后不引入空格


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

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

a, img { display: block; }

为了使代码成为有效的XHTML,您还需要在锚点标记之外有一个块元素,body标记不能直接包含内联元素。使用样式将锚定标记设置为块元素没有帮助,在应用样式之前,结构也必须有效。

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

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

a, img { display: block; }

为了使代码成为有效的XHTML,您还需要在锚点标记之外有一个块元素,body标记不能直接包含内联元素。使用样式将锚定标记设置为块元素没有帮助,在应用样式之前,结构也必须有效。

即将发布同样的内容。这就解决了问题。你们真的试过吗?图像标签是一个输入错误,我的原始文档中实际上有“img”。这并不能解决问题,我测试过了。是否确保在开始标记和结束标记之间不留空格?这才是真正的解决办法。如果你输入空格,你仍然会有问题。我正要发布同样的东西。这就解决了问题,你也是
你们真的试过这个吗?图像标签是一个输入错误,我的原始文档中实际上有“img”。这并不能解决问题,我测试过了。是否确保在开始标记和结束标记之间不留空格?这才是真正的解决办法。如果你输入空白,你仍然会有问题。图像是一个输入错误,“img”不能解决它。图像是一个输入错误,“img”不能解决它。嘿!我甚至连一个div都没有。但我介绍了一个,并确保没有留下任何空间。这解决了问题。谢谢,伙计,嘿!我甚至连一个div都没有。但我介绍了一个,并确保没有留下任何空间。这解决了问题。谢谢你,伙计。+1我更喜欢这个答案,因为它没有在HTML中添加神秘的div。而且,它解释了IE渲染错误的来源。+1我更喜欢这个答案,因为它没有在HTML中添加神秘div。并解释了IE渲染错误的来源。