`

用inline-block实现两列布局,在手机浏览器上有兼容性问题

 
阅读更多

下面这个DOM结构

<div>
    <div>div1</div>
    <div>div2</div>
</div>

使用inline-block的方式实现2列布局:

div {
    font-size: 0;
}

div > div {
    display: inline-block;
    width: 50%;
    font-size: 14px;
}

虽然在PC上可以解决1px间隙的问题,但是在很多手机浏览器上(android 4.2以下),会有兼容性问题。右边的div会掉到下面

所以更好的办法是:

div {
    overflow: hidden;
}

div > div {
    float: left;
    width: 50%;
}


分享到:
评论

相关推荐

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    通过在display属性中先声明"-moz-inline-stack",再声明"inline-block",可以确保在支持inline-block的浏览器中使用inline-block,而在不支持的情况下则使用兼容的替代方案。 更进一步,针对IE浏览器,尤其是IE7,...

    display:inline、block、inline-block的区别(转的)

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...

    inline-block 前世今生1

    在处理IE6和IE7的display:inline-block兼容性问题时,开发者通常会使用以下代码: ```css display:inline-block; /* 现代浏览器 */ *display:inline; /* 修复IE6、7的display:inline-block支持 */ *zoom:1; /* 触发...

    有关display:inline-block在FF出现空白的解决方案

    在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...

    display:inline-block的实际应用

    2. **兼容性问题**:虽然 `display:inline-block` 在现代浏览器中支持良好,但在一些较旧的浏览器,如IE6/7,需要使用 `*zoom:1` 或 `display:inline` 并结合 `*display:inline` 来实现兼容。 3. **内联限制**:尽管...

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

    总结来说,`inline-block`在创建灵活且响应式的布局中发挥着重要作用,但其在浏览器兼容性方面存在问题。开发者需要了解不同浏览器的特性,合理运用`-moz-inline-stack`、`vertical-align`和`hasLayout`等技巧来解决...

    Firefox Bug: inline/inline-block的间隙采用代码缩进可解决

    然而,`inline-block` 在不同浏览器间存在兼容性问题,特别是在Firefox中有一个知名的bug,表现为相邻的`inline-block`元素之间会有一段看似多余的空白间隙,通常为6像素。这个问题同样存在于IE8,但不适用于更早...

    css块状元素与内联元素以及inline-block

    CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...

    CSS属性display:inline-block用法深入理解

    尽管存在浏览器兼容性挑战,但通过合理的CSS hack和技巧,我们可以克服这些问题,实现跨浏览器的`inline-block`效果。在实际应用中,建议结合其他CSS3布局技术,如Flexbox或Grid,以获得更强大、更一致的布局解决...

    css之display属性之inline-block布局实现详解

    在这个详解中,我们将深入讨论`display`属性中的`inline`、`block`以及`inline-block`值,以及它们在实际布局中的应用。 1. **`display: inline`** `inline`值使得元素作为行内元素显示,这意味着元素会与其他...

    display:inline-block的原理分析

    在 IE 中实现 `display:inline-block` 效果有两种常见方法: 1. 首先设置 `display:inline-block` 触发 layout,然后在另一个声明中设置 `display:inline`,这样元素会呈现为内联对象。需要注意的是,这两个声明...

    关于css display: inline block inline-block的区别分析

    display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最...

    inline-block元素的4px空白间距解决方案

    有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...

    inline-block带来的元素间距问题解决

    为`inline-block`元素添加负的外边距(如`margin-right: -4px`),但这需要根据实际情况调整,并且可能在不同浏览器中有差异。 4. **使用浮动布局**: 如果不考虑IE6/7的兼容性,可以使用`float`属性代替`display...

    IE6的inline-block

    1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和...让IE6区块元素具备inline-block属性,有两种方法 A、可以先触发layout,再设置为inline,需要注意的是这两个display必须在两个CSS声明

Global site tag (gtag.js) - Google Analytics