html - 浏览器是否应该以与其他元素相同的比例缩放图像？

Question

左侧的 div 元素似乎与右侧背景图像中的交替颜色对齐。

但是当浏览器的缩放比例发生变化时，背景图像会按照与 div 元素不同的比例重新调整大小。

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/

(您必须调整浏览器的缩放比例才能重现)

我测试过的所有浏览器似乎都做同样的事情，但背景图像和元素之间的比例不同。

有没有办法解决这个问题，对布局进行最小的更改(它由计划工具生成)，最好只使用 css？ Javascript 也可以。

您能否确认图像不一定缩放到与其他元素相同的大小，所以这是预期的行为？

Answer 1

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

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