2

这是我的问题：JSFiddle

我有一个tablewithin a div，div是 50% 宽。表格应填充 100% 的宽度div。

<div>
   <table>
       <tr>
           <td>Resize and see Pixel to the right -></td>
       </tr>
   </table>
</div>

CSS：

div {
   width: 50%;
   background: red;
}
table {
   width: 100%;
   background: rgb(255,255,255);
}

它基本上可以工作，但是当您调整浏览器大小时，有时可以看到div. 这是因为div' 宽度不会被四舍五入，但table' 宽度会。

例如：如果 div 是 315.5px 宽（因为是 50% 的宽度），那么表格只继承了 315px 的宽度作为它的宽度。然后浏览器将 div 向上舍入为 316px，并使 div 比表格宽 1px。这个错误只发生在我的Chrome中。

我怎样才能解决这个问题？

4

1 回答 1

0

这是我在其他设计设置中遇到的问题，很难克服，我还没有解决。正在发生的事情是 Mac 和 PC 渲染字体的方式大约有 1px+ 的不同。

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

更新：

鉴于下面的对话，我整理了一个 JS 文件以在需要时调整 div 的大小。我无法复制这个问题，所以我不知道它是否会起作用，但它就是这样。当我在我的 Mac 上回家并看到错误时，我很想试试这个。

function fixDiv() {
    var myDiv = document.getElementById("myDiv");
    var currentWidth = myDiv.offsetWidth;

    if (currentWidth % 2 != 0) {
        var newWidth = parseInt(currentWidth) + 1;
        myDiv.setAttribute("style", "width: " + newWidth + "px");
    }
}

window.onresize = function (event) {
    fixDiv();
}

fixDiv();
于 2013-02-22T19:01:46.447 回答