0

在过去的几个小时里，我一直在研究这个，我放弃了。我无法弄清楚这一点。

我有一个图像（标题徽标），然后是一个导航栏。图片下方有 2-3px 的空间。我系统地消除了所有外部引用的 CSS，然后添加了一些内联 CSS 来尝试解决问题。这是我现在拥有的：

<html lang='en'>
        <head>
            <meta charset='utf-8' />
            <title>Sci-fi's Big Mistake</title>
        </head>

        <body style='margin:0px; padding:0px; border:1px solid green;'>


            <img src='/images/farscape.jpg'  alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>
            <span style='border:1px solid blue;margin:0px; padding:0px; '>text</span>
            <ul id='menu' class='gold' style='margin:0px; padding:0px; border:1px solid red;'>
                <li><a href='#'>Home</a></li>
                <li class='active'><a href='#'>About</a></li>
                <li><a href='#'>Services</a></li>
                <li><a href='#'>Products</a></li>
                <li><a href='#'>Contact</a></li>
                </ul>




Shouldn't have cancelled this.
</body></html>

这是页面的屏幕截图，以及我在系统上看到的内容（Win、xp，在 IE8 和 FF 13 中相同）

http://picturepush.com/public/8737985

4

4 回答 4

2

你明白了。

http://jsfiddle.net/dennym/XBdfk/

删除<br>并添加display:block到您的图像。空间没了。

问题是<br>它有一个你无法删除的最小边距......我猜。您还必须在图像中添加一个display:block，以便文本显示在底部。

（还删除了引号中的一个小错误）

于 2012-07-16T13:54:07.593 回答
1

图片标签代码不正确，您没有关闭 alt 属性，因此样式不会生效，您应该使用双引号

<img src='/images/farscape.jpg'  alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>

您可能还想删除图像上的<br>和设置display:block;

于 2012-07-16T03:53:04.157 回答
0

如果理解正确，问题是由于图像不仅是像文本这样的内联元素，而且也被认为是“文本”。文本是用基线编写的。大多数字母在此基线上对齐，但有些字母，如 j、g 和 y 不是。因此，在呈现文本时，一些空间像素包含在底部，低于基线。您可以通过添加来推迟它

line-height:0px;

到您的图像标签。

这种图像等于字母的想法的另一个奇怪结果是，应该并排对齐的图像显示出间隙。确实：字母之间有空格！您可以通过添加到该 sme 图像标签来解决此问题：

font-size:0px;

解决您提到的该问题的另一种方法是使该标题图像成为具有相同尺寸的 div 的背景图像。Div 只是容器，没有类似字体的属性。

希望这可以帮助！

于 2014-02-13T11:14:56.710 回答
0

使用 Mac OS X/Chrome 对我来说没有任何差距。我的猜测是您的浏览器在跨度上设置的 line-height 不是 1。

尝试使用重置样式表， http: //meyerweb.com/eric/tools/css/reset/。Firebug还可以让您轻松地将鼠标悬停在元素上，以查看元素的大小以查明填充的来源。

于 2012-07-16T03:25:44.150 回答