CSS-水平线/垂直线的粗细不同 [英] CSS - horizontal/vertical lines have different thickness

问题描述

我正在尝试创建某种在Angular 2应用程序中自动生成的网格，它看起来像这样:

如您所见，星期二和星期三之间的垂直线比星期三和星期四之间的垂直线粗，尽管它们具有相同的CSS类，并且Firefox工具显示它们实际上具有相同的宽度.在水平线上也可以看到相同的问题.

如何防止这种情况发生?我应该对垂直/水平线使用不同的方法吗?

最诚挚的问候，丹尼尔

解决方案

如果增加浏览器的缩放比例，则可能会发生此问题.如果您在Windows上按ctrl + 0或在Mac上按cmd + 0，则会看到这些行显示正确.

代替使用:

  height:1像素；背景颜色:#3c8dbc; 

您可以使用:

  border-bottom:1px solid#3c8dbc; 

https://jsfiddle.net/ayv31363/4/

I'm trying to create some kind of grid which I generate in Angular 2 app automatically and it looks like this:

https://jsfiddle.net/Arcanst/ayv31363/3/

.vertical-line {
  position: absolute;
  width: 1px;
  background-color: #3c8dbc;
}

.horizontal-line {
  position: absolute;
  height: 1px;
  background-color: #3c8dbc;
}

I'm using 1px wide divs as vertical lines and 1px high divs as horizontal lines. Unfortunately they seem to have different thickness (if jsfiddle doesn't reveal the problem, maybe it's just happening in firefox). Here is a screenshot of how I see it:

As you can see, the vertical line between Tuesday and Wednesday is thicker than the one between Wednesday and Thursday although they have the same css class and firefox tools show they are actually the same width. The same problem can be seen in horizontal lines.

How can I prevent this from happening? Should I use different approach for vertical/horizontal lines?

Best regards, Daniel

解决方案

This problem can happen if you have increased the zoom of your browser. If you press ctrl + 0 on Windows or cmd + 0 on Mac you will see that the lines are displayed correctly.

Instead of using:

height: 1px;
background-color: #3c8dbc;

You could use:

border-bottom:1px solid #3c8dbc;

https://jsfiddle.net/ayv31363/4/

这篇关于CSS-水平线/垂直线的粗细不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！