inline-block属性还是非常有用的，但是在IE6 7下还是有那么点问题，现总结一下
在IE6 7下实际上对行内元素起作用但对块级元素就失去了它的作用，上代码
<div style="display:inline-block;border:1px solid red;width:100px;height:100px;">div1</div>
<div style="display:inline-block;border:1px solid blue;width:100px;height:100px;">div2</div>
IE6 7未起到效果
firefox chrome下正常显示
而对于行内元素IE6 7下可以实现inline-block
如果想在IE6 7下让块级元素也显示inline-block需要用到一下hack技术
<div style="display:inline-block;*display:inline;*zoom:1;border:1px solid red;width:100px;height:100px;">div1</div>
<div style="display:inline-block;*display:inline;*zoom:1;border:1px solid blue;width:100px;height:100px;">div2</div>
zoom:1 是为了触发IE6 7 下的hasLayout属性，主要用于盒子模型解析的时候，这样就可以设置他的宽度和高度了。
关于float，主要以前不理解在元素浮动之后元素的显示方式即display方式，当元素浮动之后元素的display属性就变为类似于inline-block，所以在行内元素浮动之后可以设置他的高度，宽度
<span style="float:left;border:1px solid red;width:100px;height:100px;">span1</span>
<span style="float:left;border:1px solid blue;width:100px;height:100px;">span2</span>
- 大小: 4.9 KB
- 大小: 4.7 KB
- 大小: 5.3 KB
- 大小: 4.7 KB
- 大小: 5.2 KB
分享到：
相关推荐
关于基线，`float`元素的基线是其顶部，而`inline-block`元素的基线保持默认，这使得`inline-block`在垂直对齐方面更具灵活性，可以配合`vertical-align`属性进行精细调整。 总结来说，`inline-block`在很多情况下...
display:inline-block 属性是CSS布局中的一个重要概念，它允许元素具有内联元素的特性（如排列在同一行内），同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用，尤其是用于创建响应...
4. **使用浮动布局**：虽然`float:left`或`float:right`不是`display:inline-block`，但它可以实现类似的效果，并且不会受到空白的影响： ```css .box { float: left; } ``` 5. **使用Flexbox或Grid布局**：...
`display:inline-block` 是 `display` 的一个值，它结合了块级元素（block-level element）和内联元素（inline element）的一些特性，为网页布局提供了更灵活的选择。在本篇文章中，我们将深入探讨 `display:inline-...
尽管这个bug在实际开发中可能不会造成太大困扰，因为设计师通常会在元素间预留一定的间距，或者直接使用浮动布局（float）来替代`inline-block`。但理解这个bug及其解决方案对于深入理解浏览器渲染机制和优化布局...
有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...
总之，`display`属性的`inline`、`block`和`inline-block`提供了丰富的布局选择，根据设计需求灵活运用这些属性，可以创建出各种复杂的页面布局。理解和掌握这些基本概念对于前端开发者来说至关重要。
如果不考虑IE6/7的兼容性，可以使用`float`属性代替`display: inline-block`。 接下来，我们简要回顾一下`block`和`inline`的基本特性： - **`display: block`**： - 占据整行，多个`block`元素会依次换行。 - ...
在网页布局设计中，`inline-block` 属性是一个强大的工具，它允许元素具有类似`inline`元素的特性，同时能够设置`margin`和`padding`，避免了`block`和`float`布局的一些问题。然而，`inline-block`元素之间会保留...
将`.list`元素的`float:left`属性替换为`display:inline-block`，这样每个`.list`元素会像文本字符一样在一行内尽可能地排列，直到没有足够的空间为止。为了防止元素间的空白间隙（由于元素间的空格或者换行符引起）...
然而，IE6和IE7这两个较老的浏览器对`display:inline-block`的支持并不完善，这给开发者带来了不小的困扰。为了解决这个问题，本文将详细介绍两种方法，使得这些旧版IE浏览器也能正确地处理`display:inline-block`。...
- 使用 `float` 或者 `flexbox` 来替代 `inline-block`，这些布局方式更加灵活且不容易出现问题。 - 对于某些特殊情况，还可以尝试使用 `transform` 属性来微调元素的位置。 #### 四、总结 通过上述分析和解决...
在实现`inline-block`布局时，开发者可能遇到的一个问题是Firefox、Safari、Opera和IE8+等现代浏览器会在相邻的`inline-block`元素间产生3像素的间距。这是因为HTML源码中的换行符被浏览器解析为一个空格，导致了这...
通过触发hasLayout，例如设置`width`、`height`、`zoom`或`float`，可以使`<li>`元素在IE 7中表现为类似`inline-block`的效果。例如，可以使用`zoom: 1;`或`*display: inline;`、`*zoom: 1;`的组合来触发hasLayout，...
CSS中的`inline-block`属性是`display`属性的一个值，它允许元素同时具有行内元素（inline elements）和块级元素（block elements）的特点。理解`inline-block`的关键在于其结合了两者的优势：行内元素的水平布局...
《CSS去除inline-block元素间隙的策略与解析》 在CSS布局设计中，inline-block元素的间隙问题时常困扰着开发者。这种间隙可能导致布局错位，影响整体的视觉效果。本文将深入探讨inline-block元素的特性，分析间隙...
柔性使用（Inline-block，float，flex）创建三个相同的块。 320-580、580-1023、1024像素（移动设备优先）。 使用calc（）和var（）函数。 将全局变量用于块颜色和填充。 边栏只能在浮动，内联块和浮动块中与相邻块...
- 将 `inline-block` 元素设置为 `float: left` 或 `float: right`，这将使元素浮动并消除间距，但可能会导致其他布局问题，需要额外处理。 - 使用 `position: absolute` 使元素绝对定位，但这种方法需要设置元素...
浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-...