`

用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%;
}


分享到:
评论

相关推荐

    仅限于自己用的web前端面试题

    - 不同的浏览器内核对标准的支持程度有所不同,这也导致了跨浏览器兼容性问题。 ### 三、行内元素与块级元素的区别 - **块级元素**:默认情况下独占一行,如 `&lt;div&gt;`、`&lt;p&gt;`。 - **行内元素**:不会独占一行,如 `...

    css样式个人总结

    `auto`会自动添加滚动条,`zoom:1`是为了解决IE6的兼容性问题,使元素具有hasLayout特性,实现高度自适应。 理解并熟练掌握这些CSS知识点,将有助于构建跨浏览器兼容、布局灵活且视觉效果出色的网页。同时,持续...

    DIV border边框显示不完全问题的解决方法

    总之,解决`div`边框显示不完全的问题需要从多个角度考虑,包括浏览器兼容性、布局方式、盒模型、CSS属性以及层叠上下文等。在实践中,通过不断调试和测试,结合使用浏览器开发者工具,通常能找到问题的根源并修复它...

    逆战班月总结

    - **优雅降级**:首先创建完整功能的页面,然后回退到低版本浏览器的兼容性处理。 【REM布局的缺点】 - **效果偏差**:不同设备的基准字体大小可能不同,可能导致布局与预期不符。 - **雪碧图定位问题**:REM单位...

    CSS Gird布局教程指南

    在浏览器兼容性方面,CSS Grid已经得到了广泛的支持,但确保查看Can I Use网站的数据以了解最新情况。在实际应用中,可能需要为不支持Grid的老版本浏览器提供回退方案。 总之,CSS Grid布局彻底改变了Web开发中的二...

    CSS中的元素定位方法详解

    在CSS中,元素定位是构建网页布局的关键技术。...同时,由于不同浏览器可能存在差异,使用reset CSS或normalize.css等工具可以帮助解决跨浏览器兼容性问题。在实践中不断探索和学习,才能真正驾驭CSS元素定位的精髓。

    frame框隱藏和顯示

    需要注意的是,由于frame存在一些安全和性能问题,并且在某些现代浏览器中不被鼓励使用,开发者现在更多地倾向于使用Ajax、Vue、React等前端框架来实现类似的功能,它们提供更灵活和强大的页面动态加载与更新能力。...

Global site tag (gtag.js) - Google Analytics