今天在做一个网页时，在IE7下发现一个奇怪的问题，先看代码：
<div style="float: left;">
<img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;"
width="553" height="179" />
</div>
感觉代码没问题，可是预览时总是发现图片下方和div边框之间有一条大概4px的空隙，最后还是得以解决。
最简单的办法是，标签写在一行中：
<div style="width: 900px;height: 75px;margin-top: 0px;"><img src="images/top.jpg" id="top" width="900" height="75"></div>
其他办法主要还是靠css属性解决! 不过，有些属性调整后在firefox下可能会有问题。一个可以使用display属性解决：
<div style="float: left;">
<img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;display:block;"
width="553" height="179" />
</div>
另一个可以用vertical-align属性解决：
<div style="float: left;">
<img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;vertical-align:top;"
width="553" height="179" />
</div>
使用margin-bottom属性解决：
<div style="width: 900px;height: 75px;margin-top: 0px;">
<img src="images/top.jpg" style="margin-bottom: -4px;" id="top" width="900" height="75">
</div>
使用字体大小属性font-size解决：
<div style="width: 900px;height: 75px;margin-top: 0px;font-size:0">
<img src="images/top.jpg" id="top" width="900" height="75">
</div>
分享到：
相关推荐
将图片的CSS样式设置为`float:left`或`float:right`可以让图片脱离常规流，从而消除下方的空隙。这是因为浮动元素会尽可能地向左或向右移动，直到碰到容器的边缘或者其他浮动元素。这种方法简单有效，但可能会导致...
在IE6中，这也有助于消除图片下方的空隙。这是因为`overflow:hidden;`会使得`<li>`元素成为一个块级格式化上下文，从而避免了浮动元素的影响。 ```css li { float:left; width:248px; height:162px; display:...
`来消除图片下方的空隙。 10. **IE6双倍边距问题**： 当设置浮动和外边距时，IE6会出现双倍边距，可通过设置`display:inline;`来解决。 11. **IE6宽度奇数像素导致右侧多出1px问题**： 调整宽度为偶数像素可以...
由于字体的存在，图片下方就会留有一定的空间，就像文字的下划线那样。这就是间隙的来源。 解决这个问题的一种常见方法是将`<img>`标签的`vertical-align`属性设置为`bottom`或`top`。例如： ```css img { ...
- IE6中的图片下方可能会出现多余的间隙。可以通过设置`display: block;`和`margin: 0;`来消除间隙。 2. **图片垂直于容器内** - 可以使用`vertical-align: middle;`或`display: flex; align-items: center;`来...
由于图片下方通常没有实际的基线，因此会产生一种视觉上的空隙。解决这个问题的一种有效方法是使用CSS来改变图片的垂直对齐方式。 具体来说，可以给`<img>`标签添加`vertical-align: bottom;`的样式属性。这个属性...
**解释**：通过上述任一方法可以解决 IE6-7 中图片下方空隙的问题。 #### 十、IE6 双倍边距的问题 **问题描述**：在 IE6 中，当元素设置了浮动和外边距时，会出现双倍边距的现象。 **解决方案**：设置 `display: ...
这个问题出现在当`<li>`元素的子元素使用浮动（`float`）属性时，IE6和IE7会在`<li>`元素下方产生额外的4像素空隙。这个问题主要影响到列表（`list`）的垂直布局，特别是在进行自定义样式设计时。 在XHTML示例代码...
这是由于图片作为内联元素，默认会有一定的行内间距，导致下方出现空隙。解决这个问题的方法是通过CSS调整图片的垂直对齐方式： ```css img { vertical-align: top; } ``` 这样，图片将与顶部对齐，消除默认的行...
将`img`标签的CSS属性`display`设置为`block`，可以使图片变成块级元素，这样它就不会受到行内元素的对齐规则影响，从而消除下方的额外间距。 ```css img { display: block; } ``` 2. **使用`vertical-align...
8. **img标签后的空白字符**：在Firefox和IE7中，img标签后的空白字符会导致图片底部与容器底部之间有空隙。消除此问题的方法是确保img标签直接闭合或设定`display:block`。 9. **失去line-height效果**：在IE6下，...
**问题**：当`<div>`中包含`<img>`标签时，在IE6-7中图片下方会出现空隙。 **解决方法**：有多种解决方案，包括调整源代码格式、修改图片的`display`属性、设置`vertical-align`以及使用`overflow:hidden`。 1. **...
- **问题描述**：在IE6中，图片下方可能会出现不必要的空白。 - **解决方法**：通过设置图片的`vertical-align`属性为`middle`或`top`来消除空白。 ##### 18. 对齐文本与文本输入框 - **问题描述**：在不同浏览器...
需要注意的是，设置margin为0并不意味着表单就一定会与上方或下方的元素完全贴合，如果页面其他部分的CSS规则定义了相关的外边距，则仍然会影响到表单元素。因此，了解整个页面的样式结构也十分重要。 在实际项目...
- **IE6**: 图片下方可能会出现空白。 - **Firefox等其他浏览器**: 通常表现一致。 **解决方案**: 使用 `display:block` 或为图片添加 `vertical-align:top` 来消除空白。 ##### 18. 对齐文本与文本输入框 - **IE...