铬太宽的css边框-Java 学习之路

-1

我的问题只发生在Google Chrome中 . 边界似乎“太厚” . 在Firefox中，一切看起来都很正常（我到目前为止仅在chrome和firefox中测试过） .

正如您在图像上看到的，有两个问题：

1）上箭头：边框是厚的（1px实心#aaa） . 当我用css绘制一个表时，边框是正常的 . 这只发生在div和表单输入字段中 .

2）下箭头：内部div的背景稍微超出外部div的边界 .

这可能是Chrome中的错误吗？

.outer-div{
    border: 1px solid #aaa;
    box-sizing: border-box;
}
.outer-div > .inner-div{
    padding: 5px;
    background: linear-gradient(#eee,#ddd);
}

编辑：产生下箭头指向的结果的代码 .

.calendar-events-block{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 15px 0;
    border: 1px solid #aaa;
}

.calendar-events-block > .events{
    flex: 1 1 auto;
}

.calendar-events-block > .events > .title{
    padding: 10px;
    font-weight: 700;
    border-bottom: 1px solid #aaa;
    background: linear-gradient(#eee,#ddd);
}

编辑2：如果我缩小到90％，一切似乎都正常（如在Firefox中） .

编辑3：有问题的jsfiddle（http://jsfiddle.net/p31ajt48/） .

编辑4：有趣的细节：当我放大或缩小时，“溢出”（ Headers 的背景越过边界）的问题消失了 .

另一个截图：

enter image description here

你有一张 table ，右边有一些div . 表的边界= 1px solid #aaa，divs的边界= 1px solid #aaa，但tabel边框比div边框薄得多 .

1 回答

1
由于这只发生在chrome中，它可能与chrome的默认样式有关 . 尝试将css重置添加到文档或尝试添加
```
* {
border: none;
}
```
到你的身体 .
回复于 2024-04-27T23:40:50+08:00

铬太宽的css边框

1 回答

相关问题