首先,应确保 CSS 样式在两个浏览器中都具有相同的属性和值。如果 CSS 样式相同,则该问题可能与浏览器的渲染方式有关。
其中可能的问题是 Safari 支持不同的盒模型。这可能导致元素在 Safari 中的盒子大小与在 Chrome 中的盒子大小不同。
为了解决这个问题,可以使用 -webkit-box-sizing 属性来指定 Safari 中的元素盒子大小。这将使 Safari 中的盒子大小与 Chrome 中的盒子大小相同。
例如:
button { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; border: 1px solid #000; background-color: #f00; color: #fff; }
通过指定 -webkit-box-sizing 属性并将其设置为 border-box,可以确保 Safari 中的盒子大小与 Chrome 中的盒子大小相同,从而解决该问题。