Vue2 elementui中的 el-form el-input 中设置el-form-item__label 的padding 和el-form-item margin 值后，input 边框模糊

Vue2 elementui中的 el-form el-input 中设置el-form-item__label 的padding 和el-form-item margin 值后input 边框模糊变粗 解决在使用 Element UI 的el-form和el-input组件时若对el-form-item__label的padding和el-form-item的margin进行了自定义设置可能会导致el-input的边框出现模糊或变粗的现象。这通常是因为样式冲突或计算错误引起的。如图可能原因及解决方案‌边框重叠或样式覆盖‌当你为el-form-item__label设置了padding同时又设置了el-form-item的margin可能会造成元素之间的间距或边框样式计算错误。建议使用box-sizing: border-box来统一计算元素的宽度与高度防止因 padding 或 border 导致布局错位。‌input 边框被误覆盖‌Element UI 中的el-input组件的边框由外层.el-input和内层.el-input__inner共同构成。如果你在样式中对.el-input__inner设置了border: none或其他边框样式可能会影响视觉效果。为避免边框模糊或变粗应确保.el-input__inner的边框样式不会被其他样式干扰。可以考虑使用更精确的选择器来控制样式。‌推荐做法‌使用 Flex 布局实现对齐与间距控制避免直接修改margin和padding导致布局问题。为el-form-item设置统一的height并保持el-form-item__label与el-input的高度一致以防止视觉上的错位。示例代码.el-form-item { display: flex; align-items: center; margin-bottom: 20px; /* 控制表单项间距 */ } .el-form-item__label { padding: 0 10px; /* 设置 label 的 padding */ height: 40px; line-height: 40px; box-sizing: border-box; } .el-input__inner { height: 40px; line-height: 40px; border: 1px solid #dcdfe6; /* 明确设置边框 */ }解决后如图如果是 el-dialog 中显示 检查容器中是否使用 transform去掉transform::v-deep .el-dialog { display: flex; flex-direction: column; //margin: 0 !important; //position: absolute; height: var(--dialog-height); min-height: var(--dialog-min-height); top: var(--dialog-top); bottom: 10%; //left: 50%; /* 不使用 transform,避免出现input 边框模数*/ //transform: translate(-50%, -50%); }