bounty还有6天到期。回答此问题可获得+50声望奖励。Kasheftin希望引起更多关注此问题。
我用的是
linear-gradient(90deg, transparent 0 47px, #000 47px 48px);
background-size(48px);在背景上画1px的垂直线。它在任何地方都能正常工作，在Safari中也是如此，除了Safari浏览器放大的情况。
下面是演示：https://jsfiddle.net/kasheftin/7s1af36g/2/
.container {
background: linear-gradient(90deg, transparent 0 47px, #000 47px 48px);
background-size: 48px;
width: 300px;
height: 100px;
border: 1px solid #000;
}<div class="container">
</div>这就是Safari Venture 16.3在110%变焦下的样子：
此外，当浏览器缩小时，这些线会完全消失。
是否有解决此问题的方法？
1条答案
按热度按时间r1zhe5dt1#
编辑：一个可能的解决方案是使用CSS zoom属性来阻止缩放应用到背景
这个属性是not supported in FF，MDN有一个fairly strong advisement不使用
reset值，但它确实防止了Safari中的问题-在这个小提琴中，我已经将zoom: reset添加到了BG元素中，但没有添加到SQ元素中-所以在Safari中基本上禁用了BG的缩放，但SQ元素仍然会放大。https://jsfiddle.net/Lbwn4tuh/上一次回答：
我不完全确定为什么Safari的表现有所不同，但在渐变中添加一个额外的透明步骤（覆盖垂直线后的像素），从
49px到100%，似乎解决了Safari在缩放时的问题。