`
luoping0425
  • 浏览: 109056 次
  • 性别: Icon_minigender_2
  • 来自: 赣州
文章分类
社区版块
存档分类
最新评论

IE6 display:inline-block bug

 
阅读更多
ie6下无法支持display:inline-block, 使用display:inline;zoom:1;
分享到:
评论

相关推荐

    display:inline-block的原理分析

    IE 6 和 7 不直接支持 `display:inline-block`,但在某些情况下,对内联元素设置 `display:inline-block` 会触发 "layout",这是一种 IE 特有的行为,使元素获得类似 `display:inline-block` 的效果。然而,对于块级...

    让IE6/IE7支持display:inline-block属性的两种方法

    在IE6和IE7中这个版本的IE流量器中,对display:inline-block属性支持不佳,这也是一个经典的BUG。 有两种方式解决这个问题,让IE6/IE7 支持 display:inline-block 的方法。 复制代码代码如下:<ul> <li></li> <li></...

    CSS教程:inline-block在各浏览器的显示

    然而,在Firefox 2、Internet Explorer 6和7中,`inline-block`的兼容性问题显现出来。Firefox 2不支持`inline-block`,但支持Mozilla特有的`-moz-inline-stack`。通过同时设置`display: -moz-inline-stack;`和`...

    模拟兼容性的 inline-block 属性

    在旧版的浏览器如 IE6 和 IE7 中,并不支持 `display:inline-block`。为了在这些浏览器上模拟出 `inline-block` 的效果,可以采用一些特定的技巧。 1. 为IE6和IE7触发hasLayout:可以通过设置 `zoom:1` 或者将元素...

    IE6中a标签同时使用inline-block与text-indent时出现的BUG

    此外,有一种针对IE6/7的特定解决方案是使用CSS hack,即`.element {display:inline-block !important; display:block;}`。由于IE6/7不支持`!important`属性,所以它们会把元素解析为`block`,而在其他支持`!...

    最全前端面试题-2.2(浏览器兼容问题篇-上百篇题集整理1个月).doc

    - **`display:inline-block`不支持**:IE6-7不支持`display:inline-block`,可使用`zoom:1`和`display:inline`来模拟。 - **图片默认间距**:IE浏览器中图片之间有默认间距,可以设置`img{display:block;}`来消除...

    BAT前端H面试题大全.docx编程资料

    - IE6和IE7存在一个经典的bug,即如果先定义了 `display: inline-block;`,再设置为 `display: inline;` 或 `display: block;`,布局可能会失效。 - 示例代码片段未完全给出,但按照上述逻辑,可以通过特定的CSS声明...

    IE6下出现双倍margin的解决方法

    解决IE6双倍margin bug的方法相对简单,只需要给受影响的元素添加`display: inline;`样式即可: ```css .ILeft { float: left; width: 150px; margin-left: 15px; display: inline; } ``` 通过这种方式,可以...

    在IE6,7中遇到未知的问题无法解决时可以尝试触发其layout

    复制代码代码如下: height:1% position: absolute float: left | right display: inline-block width: !auto – 除auto以外的值 height: !auto – 除auto以外的值 zoom: !normal – 除normal以外的值 writing-mode: ...

    CSS高级应用技巧.pdf

    此外,还提到了在IE6中常见的`margin` bug,这是指在IE6中使用`display: inline;`时,`margin-right`可能会失效的问题。使用`hasLayout`的概念(一个内部的IE渲染机制),可以通过触发布局来修复这个问题。 4. **...

    CSS之IE BUG分析与解决

    可以通过设置`display:inline-block;`来修复。 9. **断头台效应(Tombstoning)** - 当浮动元素的父级没有设定高度时,IE6可能无法正确计算高度。解决方法通常是给父级添加`overflow:hidden;`或设定固定高度。 总...

    ie6bug问题解决

    1. **PNG透明度问题**:IE6不支持PNG8和PNG24格式的阿尔法透明度,导致半透明图片显示不正常。解决方案可以使用CSS滤镜,如`filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', ...

    css部分bug解决

    display: inline-block; vertical-align: middle; } ``` - **Flex布局**:现代浏览器支持的Flex布局可以更简单地实现垂直居中。 ```css .container { display: flex; justify-content: center; align-items...

    iebug总结jar包

    5. **双边距问题**:在IE6中,浮动元素的内联元素会额外增加一个像素的边距,可通过负margin或者`display:inline-block`来修复。 6. **CSS选择器限制**:IE6不支持一些高级CSS选择器,如`:hover`在非链接元素上、`:...

    网页排版IE6兼容性问题修改方法

    当元素设置为`display:inline-block`时,IE6会出现双边距bug,可以通过设置`display:block`或`zoom:1;`(触发hasLayout)来消除。 5. **hasLayout机制** IE6特有的hasLayout机制,当元素满足某些条件时,会自动...

    margin值在IE6变成双倍

    4. **使用`display: inline-block`**:虽然IE6不完全支持`inline-block`,但可以通过一些技巧(如`zoom: 1;`和`display: -moz-inline-stack;`)来模拟这个行为,从而避免浮动。 了解并解决这个问题对于前端开发者来...

    如何兼容IE7和IE8-Div+CSS教程.txt

    - IE对于块级元素(block elements)和内联元素(inline elements)的处理存在差异,例如,当元素设置为`display: inline;`时,在IE中可能会导致布局上的问题。可以通过设置`display: table;`来避免这类问题。 4. *...

    css样式BUG大全

    - 为了实现更灵活的布局,还可以使用`display: inline-block;`或者`display: table;`等值。 #### 五、IE最小宽度问题 **问题描述:** 在Internet Explorer(尤其是IE6/7)中,使用`min-width`属性时,元素的实际...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    解决办法是在该元素上添加`display:inline`,这可以使IE6正确解析margin值。 浮动元素产生的双倍距离问题也是IE6的一个经典bug。例如,一个左浮动的div设置了`margin-left`,在IE6中会生成两倍的距离。通过设置`...

    css-generator-plugin:根据class 自动生成css文件

    css-generator-plugin 自动生成css文件,高效开发页面更新记录2.1.5bugFix: ellipsis 属性移除了 display: inline-block 生成如何使用安装依赖 npm install css-generator-plugin -D yarn add css-generator-plugin ...

Global site tag (gtag.js) - Google Analytics