自己整理css的坑(永久更新)

原创已于 2024-03-20 17:38:56 修改 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2021-04-23 10:19:44 首次发布

css 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了CSS中的一些常见问题，包括flex布局在IE10以下的不兼容性，canvas在不同浏览器的绘制差异，inline-block元素间的空隙处理，z-index与position的关系，以及padding百分比计算的问题。同时提到了浮动元素和position: sticky的注意事项，为开发者提供了解决这些跨浏览器兼容性问题的思路。

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

css的坑

1、flex 布局不兼容IE10以下，IE10以下的可以用table（微信小程序支持flex布局）

2、cavas绘制，浏览器不同绘制的图不一样，在Edge下可以直接加载16个，谷歌和火狐是8个，不一次性加载，用定时器加载谷歌能9-12，火狐能到12-15；IE怎么都只有6个。而且谷歌和火狐是加载后面添加的，前面的cavas没了，ie是加载前面的，后面的cavas没了

3、inline-block作用于行内标签，如果结构有空隙，显示也会有空隙，可以对父元素设置font-size:0px; 再在该元素里把font-size设置回来

 <span>1</span>
    <span>2</span>
    <span>3</span><span>4</span>
    <button>12</button><button>34</button>

在这里插入图片描述
4、使用z-index只有在positioned(不为static)才有效

5、padding 的百分比是相对与父级的宽度 在父级有固定宽高时，子集里加padding百分比，效果可能时父级只有高度加长，宽度不变。

<div class="w100">
    <div class="d">
        2732t2t8232
    </div>

</div>

css

  .w100{
            display: inline-block;
            background-color: aquamarine;

        }
        .d{
            width: 100px;
            height: 100px;
            padding:5%;
            background-color: thistle;
        }

在这里插入图片描述
如果父级和子集都是内联标签，则padding属性不好用。