# 解决引入本组件后box-sizing在全局中被设置为了border-box及其导致的样式问题(webclient-vue-mapboxgl同样适用)

本组件所引用的Antd中的antd.css文件将box-sizing全局设置为了border-box

因此在某些未使用Antd的项目中,引用本组件后有可能会出现与盒模型相关的样式问题,如下面的示例:

# 错误示例:

说明:下图为引用webclient-vue-ui后的错误界面,在本示例中,由于元素的height和padding均是按照box-sizing的默认值content-box类型来写的,而本组件的引入导致box-sizing被全局设置为了border-box,使得该元素的高度由之前正确的40px(height+padding)变为了错误的20px(height)。

bug示例

以下为3种解决方案,推荐使用方案1:

# 解决方案1:元素样式设置box-sizing(推荐)

在需要修改的元素的样式中增加一行:

box-sizing: content-box;

例如,以上示例修改为:

.content-div ul li {
    height: 20px;
    padding: 10px 0;
    box-sizing: content-box; // 增加该行
}

修改完成后,可以看到界面正确显示: bug示例

# 解决方案2:按照border-box类型来修改元素高度等信息

例如,以上示例经过计算得到border-box类型下元素的高度实际为40px,因此修改高度为:

.content-div ul li {
    height: 40px;  // 修改为实际高度
    padding: 10px 0;
}

该方案也可解决此类问题,但某些情况下(如height为100%)修改会相对困难,不建议应用此方案。

# 解决方案3:在项目的App.vue文件中全局设置(慎用)

在项目的App.vue文件的style中加入以下内容:

*,
*::before,
*::after {
    box-sizing: content-box !important;
}

该方案会将全局的box-sizing都设置为content-box且无法覆盖,容易造成其他样式无法兼容的问题,因此不建议采用此方案。