如何摆脱IE中页面底部的空间
[英]How do I get rid of the space at the bottom of the page in IE
问题描述
I'm trying to make a page with an image meant for being loaded in an iframe. 
我正在尝试制作一个带有要在iframe中加载的图像的页面。 But there is 4px of space at the bottom of the body tag that I can't seem to get rid of. 但是body标记底部有4px的空间，我似乎无法摆脱。 Heres my simplified source: 这是我的简化来源：
<!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>
You'll notice if you shrink your window within 4 pixels of the bottom of the image, you'll get a scroll bar. 您会注意到，如果将窗口缩小到图像底部4个像素以内，则会出现滚动条。 Where the crap is that space coming from? 这个垃圾来自哪里？
6 个解决方案
解决方案1
2 已采纳 2010-07-09 01:23:53
The image is placed on the base line of the text line that it's in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like g and j . 图像放置在其所在的文本行的基线上。图像下方的空间是基线与字符单元格底部之间的距离，此处有用于悬挂字符（如g和j ）的空间。 With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers. 由于浏览器的默认字体和字体大小恰好为四个像素，因此在其他浏览器中获得的结果会略有不同。
One solution is to make the image a block element, that way it's not part of a text line, and doesn't have a space below the base line. 一种解决方案是使图像成为块元素，这样它就不会成为文本行的一部分，并且在基线下方没有空格。 The anchor tag is an inline element and it can't have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also: 锚标记是一个内联元素，并且不能在其中包含block元素，因此要使元素在应用样式之后变得有意义，还必须将anchor标签也设置为block元素：
a, img { display: block; }
(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can't contain inline elements directly. Making the anchor tag a block element using style doesn't help, the structure has to be valid also before the style is applied.) （要使代码成为有效的XHTML，您还需要在anchor标签之外添加一个block元素，body标签不能直接包含内联元素。使用style将锚标签设为block元素无济于事，该结构必须有效同样在应用样式之前。）
解决方案2
1 2010-07-09 01:08:43
All browsers come with default styles. 所有浏览器都带有默认样式。 Although you are resetting your tags for the page, there's no such tag as image in your CSS. 尽管您正在重置页面的标签，但是CSS中没有诸如image之类的标签。
I suggest using a more global reset stylesheet. 我建议使用更全局的重置样式表。 I like the one from Eric Meyer . 我喜欢埃里克·梅耶 （ Eric Meyer）的那个。 Something as simple as this can help level the playing field between browsers. 如此简单的操作可以帮助平衡浏览器之间的竞争环境。
解决方案3
1 2010-07-09 01:09:43
用样式上的img替换图像
解决方案4
1 2010-07-09 01:10:35
将您的“ a”和“ img”标签放入这样的div中
<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>
解决方案5
1 2010-07-09 01:22:25
This is a follow-on to hallie's answer, here is a full working example that has been updated in a number of ways to make it actually XHTML 1.0 Transitional compliant as well as not showing the spaces. 这是Hallie的回答的后续内容，这是一个完整的工作示例，已通过多种方式进行了更新，以使其实际上符合XHTML 1.0 Transitional，并且未显示空格。 Make sure NOT to introduce whitespace after the </a> 确保不要在</a>之后引入空格
<!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>
解决方案6
0 2010-07-09 01:08:43
All Internet browsers have a small bit of padding they add to the pages themselves. 所有Internet浏览器都有少量填充，它们会自己添加到页面中。 One surefire way to get rid of it is to simply nuke all margin and padding from every element. 摆脱困境的一种可靠方法是简单地删除每个元素的所有边距和填充。
*
{
margin: 0px;
padding: 0px;
}
Of course, this will remove margin and padding form every element on your pages, so use this with caution, overriding this default whenever you need padding and margin (every other selector has a higher priority than this global one, so it's easy to do). 当然，这会删除页面上每个元素的边距和填充，因此请谨慎使用，在需要填充和边距时覆盖此默认设置（其他选择器的优先级都高于此全局选择器，因此很容易做到） 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.