低版本浏览器flex布局简易替代方案

最新推荐文章于 2024-01-06 21:49:33 发布

原创

最新推荐文章于 2024-01-06 21:49:33 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了在不支持flex布局的低版本浏览器中，如何实现类似布局。提出了'宽度分离'和'格式化宽度'两种解决方案，并指出这两种方法可能导致的间距问题。通过网格布局和调整元素间距的方法解决了该问题。同时，文章还提到了一个常见的CSS布局坑，即行内块元素间的空白字符影响布局，并给出了相应的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：实现以下布局

IE10以上可采用最为简单粗暴的flex弹性布局，具体如何做，请移步百度；

若要兼容IE8+可使用“宽度分离”或者特定场景下使用格式化宽度来实现

宽度分离：在不考虑box-sizing属性下，宽度分离是保证元素尺寸改变不影响布局的良好解决方案，甚至在某种情况下比box-sizing具有更好的表现。具体原则是：width属性不与影响宽度的border、padding（有时候包括margin）属性共存。具体做法是：在目标元素的外层嵌套一层父元素，并将width属性值写在该父元素上，其border、padding、margin等值照旧写在目标元素上。

<style>
.parent {
    width: 300px;
    font-size: 0;            /*坑：见后文*/
}
.child {
    width: 100px;
    background: pink;
    display: inline-block;
}
.box {
    height: 200px;
    border: 1px solid gray;
    margin: 10px;
}
</style>

<div class="parent">
    <div class="child">
        <div class="box"></div>
    </div>
    <div class="child">
        <div class="box"><