`
cloudstars
  • 浏览: 40270 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

IE6/7下li元素内有浮动元素时底部出现3像素BUG解决

 
阅读更多

 现象:

        当li内有元素浮动时,li元素底部出现3个像素空隙(此处日期span右浮动,li增加了background-color以使bug现象更加明显)

 

解决方法:

        在日期的span元素上加上vertical-align:middle(top,bottom均可)如:span.time{float:right;vertical-align:middle;}

 

解决之后的效果:


 

  • 大小: 8.9 KB
  • 大小: 23.8 KB
分享到:
评论

相关推荐

    多浏览器下IE6 IE7 firefox li 间距问题

    ### 解决多浏览器下IE6、IE7及Firefox中`<li>`元素间距兼容性问题 #### 背景介绍 在Web开发过程中,我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet ...

    IE6/IE7中li底部4px空隙的Bug

    这个问题出现在当`<li>`元素的子元素使用浮动(`float`)属性时,IE6和IE7会在`<li>`元素下方产生额外的4像素空隙。这个问题主要影响到列表(`list`)的垂直布局,特别是在进行自定义样式设计时。 在XHTML示例代码...

    9个最常见IE的Bug及其fix

    在使用浮动元素时,IE6可能会在元素之间产生额外的空白,导致布局不整洁。这种现象尤其在并排的浮动元素间更为明显。 **解决方案**:可以通过在浮动元素上设置`display: inline;`属性来解决这个问题。这将告诉IE6以...

    IE6和IE7中行内元素后的浮动元素被折行的问题解决

    然而,在IE6和IE7中,如果浮动元素前面有一个非浮动的行内元素,它们会错误地将浮动元素的当前行看作是非浮动元素的底部边界,从而导致浮动元素被推至下一行。此问题在IE8的快速渲染模式(Quirks Mode)下也会出现。...

    IE 常见bug 及其fix

    在Web开发领域,Internet Explorer(IE)曾是程序员们的一大挑战,尤其是对于前端开发者来说,因为IE中存在许多特有的bug。这些bug不仅让开发者头疼,还严重影响了开发效率。本篇将详细介绍9个最常见的IE bug及其...

    IE浏览器下的图片空隙间距BUG和解决办法.pdf

    这个问题主要出现在IE浏览器的旧版本中,特别是IE6和IE7,而在现代浏览器如Firefox、Chrome、Safari等中则很少遇到。这个BUG表现为在设置好图片的margin和padding为0的情况下,图片之间仍然会出现不必要的间距。 ...

    IE7 float:right 右浮动时元素换行错位的bug解决方法

    然而,在某些情况下,如元素具有特定的`margin`值,尤其是在IE7这样的老版本浏览器中,可能会出现元素换行错位的bug。 在提供的代码示例中,我们看到一个`<ul>`列表,其中的`<li>`项包含两个`<a>`元素,其中一个...

    CSS完美兼容IE6IE7FF的通用方法

    处理浮动元素时,`float`和`margin`之间的计算在IE中可能会出现偏差。使用`display: inline`或`display: table`可以解决某些布局问题,尤其是在IE中。 ```css #box { float: left; width: 100px; margin: 0 0 0 ...

    纯CSS的下拉菜单,支持IE6,IE7,Firefox

    1. 对于IE6和IE7,我们可以使用`<a>`元素包裹整个`<li>`,然后使用`:hover`伪类: ```css .dropdown a:hover + ul, .dropdown a:hover > ul { visibility: visible; opacity: 1; } ``` 2. IE6不支持透明度,所以...

    多浏览器下IE6 IE7 firefox li 间距问题第1/2页

    ### 多浏览器兼容性问题:IE6、IE7与Firefox下的`<li>`元素间距差异 #### 背景介绍 在Web开发过程中,我们经常会遇到不同浏览器对相同CSS样式的解析存在差异的情况,这种现象被称为浏览器兼容性问题。本文将针对在...

    最常见的9种IE_css_bug及fix

    ### 最常见的9种IE_css_bug及fix:深入解析与解决方案 #### 1. 居中布局问题 在Web开发中,将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标,但在IE6中,这种方法却会遇到问题。...

    解决IE6下三级下拉菜单被select遮挡的问题.docx

    在IE6浏览器中,由于其自身的布局和渲染机制存在一些bug,导致在实现多级下拉菜单时,可能会出现下拉菜单被页面中的`<select>`元素遮挡的问题。这个问题对于网页开发者来说是一个常见的头疼问题,尤其是在需要兼容旧...

    利用JQuery实现网页左侧树形菜单(IE6 IE7 Firefox下测试通过)

    本教程将深入讲解如何利用jQuery库来实现一个在IE6、IE7以及Firefox浏览器下都能正常工作的左侧树形菜单。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发者能够更高效地构建动态...

    CSS的下拉菜单,支持IE6 IE7 Firefox

    ### CSS的下拉菜单,支持IE6 IE7 Firefox #### 概述 本文将详细介绍一个兼容Internet Explorer 6(IE6)、Internet Explorer 7(IE7)以及Firefox浏览器的纯CSS下拉菜单实现方法。该下拉菜单不仅具有良好的跨浏览器...

Global site tag (gtag.js) - Google Analytics