0

当我尝试为我的网站设置主题时，我发现当图像与超链接一起使用时会出现一些奇怪的行为。这是一个示例代码：

<div id="maindiv">   <a href="google.com">
     <img src="https://lh4.ggpht.com/AlYHsHF4I5Y0Hx-64ObsbQsJVgbVIu-GK6cJwn1PHeeH0aIlEv1vtizf7whwfB8kuA=w16">
</a> </div>

你也可以在这里预览： http ://cssdeck.com/labs/vzine2bc

正如你所看到的，图像上有一个奇怪的边距，包含的 div 并没有完全覆盖它，尽管没有任何东西可以创建边距。这是一种<a href>行为还是我错过了一点？

4

3 回答 3

1

img { display: block; } 或者img { display: inline-block; }应该修复它。

在这里看小提琴：http: //jsfiddle.net/zitrusfrisch/7vh8Y/

编辑：

正如评论中提到的@Zettamimg { display: inline-block; }并没有解决问题。因此，如果img { display: block; }不是一个选项，因为您希望它们内联显示，请尝试以下替代方法：

  1. 让图像float: left;但不要忘记以某种方式清除浮动，例如将包装元素设置为overflow: hidden;（http://jsfiddle.net/zitrusfrisch/7vh8Y/1/）
  2. font-size: 0px;在包装元素上（http://jsfiddle.net/zitrusfrisch/7vh8Y/2/）
  3. img { vertical-align: middle; }也可以，只要字体大小不大于图像（http://jsfiddle.net/zitrusfrisch/7vh8Y/3/）
于 2013-11-02T21:00:24.037 回答
0

试试这个：

a img { border: 0; }
于 2013-11-02T17:33:53.090 回答
0

一些浏览器在超链接内的图像周围设置边框。您可以通过使用 css 指定边框来避免这种情况：border-style: none

于 2013-11-02T17:39:14.610 回答