边框折叠在chrome浏览器中不能正常工作。一些边框线看起来很粗。请看这张图片并帮助我解决这个错误。
我需要为所有行精简边框。但突出显示的行边框看起来像粗体。为测试目的,请在链接中看到并删除背景色。请检查在 chrome 浏览器。https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
边框折叠在chrome浏览器中不能正常工作。一些边框线看起来很粗。请看这张图片并帮助我解决这个错误。
我需要为所有行精简边框。但突出显示的行边框看起来像粗体。为测试目的,请在链接中看到并删除背景色。请检查在 chrome 浏览器。https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
4条答案
按热度按时间gtlvzcf81#
这与用户缩放浏览器无关。这是Windows显示缩放比例,在某些设备上默认为125%。在浏览器缩放80%时,产生的边框折叠看起来正常,但在100%时看起来不正常。
我发现设置
border: 0.5px solid;
有效地解决了这个问题。insrf1ej2#
检查是否放大了页面?按
Ctrl+0
可将缩放重置为100%。在样式中看不到任何可能导致此问题的东西。而且,根据分数缩放,效果与浏览器渲染错误非常相似。
从
Result size: 753x…
可以假设你的屏幕宽度是1920 px,你把它放大到1. 25:-)yhuiod9q3#
有多种方法可以实现这一点,自然在CSS边框或线条的最小宽度是1px不能低于1px。
我们不能让它更薄,但我们可以让它看起来更薄。
选项1:保持颜色接近背景色将使1px线条看起来比1px线条细
选项2:
border-color:#dddddd50;
降低颜色不透明度达到同样的效果,这里用50结尾的十六进制(dddddd
)代码定义不透明度00 to 99
请注意你不能在十六进制代码结尾加上100。第一个
68de4m5k4#
正如@robert-chapin在上面指出的,我的问题也是由Windows显示缩放设置为(推荐)125%。在CSS中更改边框大小没有帮助。对我来说最好的解决方案是简单地将Windows显示缩放比例更改为100%。现在我的表格边框在Chrome中看起来又正常了,而且我在屏幕上的位置更合适,因为所有东西都变小了。(顺便说一句,如果我将浏览器缩放到125%,那么我猜基本上又是同样的问题,粗边框再次出现)