IE与FF中的HTML DIV和IMG标签间距
[英]HTML DIV and IMG tag spacing in IE vs. FF
问题描述
I'm having trouble with the layout of a simple HTML page. 
我在简单的HTML页面布局方面遇到了麻烦。 Please help. 请帮忙。
Here's the layout I'm going for... 这是我要去的布局......
Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif 布局http://img516.imageshack.us/img516/9637/layoutfk5.gif
- orange = body 橙色=身体
- blue/red = frame div 蓝色/红色=帧div
- green = header image green =标题图片
- black/white = menu div 黑/白=菜单div
It looks correct in Internet Explorer, but in Firefox, Safari, and Chrome there's a 4-pixel gap between my image (header) and my div (menu). 它在Internet Explorer中看起来是正确的，但在Firefox，Safari和Chrome中，我的图像（标题）和我的div（菜单）之间有4个像素的间隙。
Internet Explorer, Firefox, Safari, and Chrome... Internet Explorer，Firefox，Safari和Chrome ......
Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif 浏览器http://img516.imageshack.us/img516/3292/browserszi8.gif
This is my HTML... 这是我的HTML ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
...
<body>
<div id="frame">
<img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
<strong>One</strong> |
<a href="two.html">Two</a> |
<a href="three.html">Three</a> |
<a href="four.html">Four</a> |
<a href="five.html">Five</a> |
<a href="six.html">Six</a> |
<a href="seven.html">Seven</a> |
<a href="eight.html">Eight</a> |
<a href="nine.html">Nine</a>
</div>
<div id="content">
...
</div>
...
</body>
</html>
Notice there's no whitespace between the IMG and the menu DIV. 请注意，IMG和菜单DIV之间没有空格。
This is my CSS... 这是我的CSS ...
...
div#frame {
background: #FF0000;
margin-right: auto;
margin-left: auto;
width: 700px;
border: 5px #30AADE solid;
}
div#frame img#header {
margin: 0;
padding: 0;
border: 0;
}
div#frame div#menu {
margin: 0 auto 0 auto;
padding: 5px 0 5px 0;
border-top: solid 2px #FFFFFF;
text-align: center;
font-size: small;
color: #88BE34;
background-color: #000000;
}
div#frame div#menu strong {
font-size: medium;
color: #FFFFFF;
}
div#frame div#menu a {
color: #88BE34;
}
Why are Firefox, Safari, and Chrome showing that 4-pixel gap? 为什么Firefox，Safari和Chrome显示4像素差距？
4 个解决方案
解决方案1
4 已采纳 2009-02-09 15:36:38
It has to do with the default rules for IMG tags. 它与IMG标签的默认规则有关。
I recommend always using this in your stylesheet as a default rule: 我建议您始终在样式表中使用此作为默认规则：
img{
display:block;
}
解决方案2
1 2009-02-09 15:38:56
My guess is it's the line height of the image-elements line, since IMG is a an inline element. 我的猜测是它是图像元素行的行高，因为IMG是一个内联元素。 You could probably fix it by giving img#header display: block; 你可以通过给img＃header display: block;修复它display: block; . 。
Anyways, what you should really do is remove the entire image and use a H1-element plus one of the many image replacement-techniques out there. 无论如何，你应该做的是删除整个图像并使用H1元素加上许多图像替换技术之一。
Edit: When that is said, your menu should also be marked up as an unordered list (UL). 编辑：说完后，您的菜单也应标记为无序列表（UL）。
解决方案3
1
In "standard" browsers (and in fact IE6 with the proper DOCTYPE!), your image is INLINE mode by default, so it gets spacing as if it was a letter sitting on the baseline of text. 在“标准”浏览器中（实际上IE6具有正确的DOCTYPE！），默认情况下，您的图像处于INLINE模式，因此它的间距就像是位于文本基线上的字母一样。
freelookenstein gave the solution to remove the extra spaces due to text alignment of INLINE mode. freelookenstein给出了解决方案，以消除由于INLINE模式的文本对齐而产生的额外空间。
It is the solution, but I would be careful about using a display:block by default as most likely that will mess up your typical web page content down the line. 这是解决方案，但我会小心使用显示器：默认情况下阻止，因为这很可能会使您的典型网页内容陷入困境。
You could either add the display:block property to a class or inline style on your image alone. 您可以将display：block属性单独添加到图像或内联样式上。
Or something like this: 或类似的东西：
img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }
Personally I would recommend to limit display:block only to those images you know are used for the site layout, or those that are specifically inset in boxes. 我个人建议限制显示：仅阻止您知道用于站点布局的图像，或者专门插入框中的图像。 In which case often you have already a class on the parent element like: 在这种情况下，您经常在父元素上有一个类，如：
<div class="imagebox">
<img .... />
</div>
.imagebox img { display:block; }
解决方案4
1 2009-02-13 00:59:03
You should wrap your menu links in an unordered list and then style the items with CSS. 您应该将菜单链接包装在无序列表中，然后使用CSS设置项目样式。 There are some reason for doing this: 有这样做的原因：
Structuring your navigation links as a list results in more semantic markup.
将导航链接结构化为列表会产生更多的语义标记。 It better represents the content you are presenting. 它更能代表您呈现的内容。 If you were to view the site with no CSS styles at all (you can do this with the Web Developer Toolbar for Firefox), you would still get a meaningful representation of your site layout. 如果您要查看没有CSS样式的网站（您可以使用适用于Firefox的Web Developer Toolbar执行此操作），您仍然可以获得有意义的网站布局表示。 This is especially meaningful if you intend the site to be viewable by mobile browsers. 如果您希望移动浏览器可以查看该网站，这一点尤为重要。 This may also (slightly) help search engines prioritize the content and boost your ranking.
这也可能（稍微）帮助搜索引擎优先考虑内容并提高您的排名。 You can define a style for your list items with a border on one side and some margins to get the "pipe delimited" effect.
您可以为列表项定义样式，在一侧有边框，有些边距可以获得“管道分隔”效果。 This will be reusable and makes it easier to change the menus to some other style in the future. 这将是可重复使用的，并且可以在将来更轻松地将菜单更改为其他样式。
See A List Apart - CSS Design: Taming Lists 请参阅A List Apart - CSS设计：驯服列表
There is an example there showing complete CSS for achieving this effect. 有一个示例显示完成CSS以实现此效果。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.