4

The div elements on the left side appear to be aligned with the alternating colors in the background image on the right.

But when the browser's zoom is changed, the background image is re-sized in a different proportion than the div elements.

Html:

<div class=dhx_scale_holder style="background-image: none; width: 65px;">
  <div class="dhx_scale_hour">12:00 AM</div>
  <div class="dhx_scale_hour">1:00 AM</div>
  <div class="dhx_scale_hour">2:00 AM</div>
</div>
<div class="dhx_scale_holder " style="left: 75px;"></div>

CSS:

.dhx_scale_holder {
    position: absolute;
    top: 0px;
    width: 74px;
    background-image: url("http://i40.tinypic.com/dpwvfk.png");
    background-repeat: repeat;
    border-right-width: 1px;
    border-right-style: dotted;
    border-right-color: #586a7e;    
    height: 1440px;
}

.dhx_scale_hour {
    text-align: center;
    font-size: 10px;
    line-height: 40px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    background-color: rgb(194, 213, 252);
    height: 59px;
    width: 65px;
}

JSFiddle:

http://jsfiddle.net/KuAnW/

(You will have to play with the zoom of your browser to reproduce it)

Browser zoom at 100% Browser zoom at 150%

All the browsers I have tested seems to do the same, with different proportions between the background image and elements though.

Is there anyway to fix this, with minimal changes to the layout (it is generated by a schedule tool), ideally only with css? Javascript would be ok too.

Could you confirm that images do not necessarily scale to the same size than others elements and so this is the expected behavior?

4

1 回答 1

0

我认为这是由于舍入误差。当您调整 24 个“dhx_scale_hour”元素的大小时,浏览器会在确定它们各自的大小时四舍五入到最接近的像素。因此,它不会以与单个“dhx_scale_holder”元素完全相同的方式调整大小(仅四舍五入一次)。这就是为什么它们似乎在图表顶部正确调整大小,但随着单个像素的错误在底部累积而失步。这也是为什么它在 200% 等整数缩放时工作良好的原因。

我认为这里的表格是最合适的格式。hour 和 holder 元素都可以是 td 元素,并且所有浏览器都可以处理缩放。

于 2013-10-03T00:39:10.793 回答