# 解决引入本组件后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)。

以下为3种解决方案,推荐使用方案1:
# 解决方案1:元素样式设置box-sizing(推荐)
在需要修改的元素的样式中增加一行:
box-sizing: content-box;
例如,以上示例修改为:
.content-div ul li {
height: 20px;
padding: 10px 0;
box-sizing: content-box; // 增加该行
}
修改完成后,可以看到界面正确显示:
# 解决方案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且无法覆盖,容易造成其他样式无法兼容的问题,因此不建议采用此方案。