Question

在Chrome浏览器http://jsfiddle.net/A8fhT/3/中打开此链接并查看元素宽度（270），然后进行缩小（ctrl +＆＃34; - ＆＃34;），现在看到宽度（269）。在Firefox上一切正常，任何Chrome解决方案，或者这是错误？

编辑： A.K示例http://jsfiddle.net/akhurshid/5E9kj/ 图片：http://s7.postimage.org/qgezkqcor/image.png

Answer 1

我是geni.com的主要前端开发人员，主要负责HTML5 tree。

我与zoom进行了广泛的合作，但未能在所有浏览器中获得一致的行为。但是，我发现CSS变换的scale比缩放更可靠。

如果您确实需要缩放，请尝试将scale应用于$(body)（或任何其他元素）。我能够在Chrome和＆amp ;;中获得一致的宽度FF。

JSFiddle Demo

Answer 2

问题只出现在绝对定位元素上，所以我修改了jQuery函数（// lines）。

    function getWidthOrHeight(elem, name, extra) {

        //deletes position//
        var $elem = $(elem); //
        var position = $elem.css('position'); //
        $elem.css('position', ''); //

        // Start with offset property
        var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
        i = name === "width" ? 1 : 0,
        len = 4;

        if (val > 0) {
            if (extra !== "border") {
                for (; i < len; i += 2) {
                    if (!extra) {
                        val -= parseFloat(jQuery.css(elem, "padding" + cssExpand[i])) || 0;
                    }
                    if (extra === "margin") {
                        val += parseFloat(jQuery.css(elem, extra + cssExpand[i])) || 0;
                    } else {
                        val -= parseFloat(jQuery.css(elem, "border" + cssExpand[i] + "Width")) || 0;
                    }
                }
            }

            //sets position//
            $elem.css('position', position); //

            return val + "px";
        }

Answer 3

我遇到了同样的问题，并且找到了解决方案。

我创建了一个隐藏的画布对象，并且在其中包含了宽度问题的div。页面加载后，我从画布中提取了div（展开），并且在任何缩放级别下，一切看起来都很棒！

希望有帮助！

缩放的Chrome浏览器中的Div宽度

3 个答案: