铬给出错误的元素宽度

编程问答 2022-04-26

问题描述

| 我正在Mootools中制作一个工具提示类，该类取决于获取工具提示元素的宽度以使其在目标上方居中。 它在Chrome浏览器以外的所有浏览器中均能正常运行，Chrome浏览器在每次页面重新加载时为其元素宽度提供了两个完全不同的数字。当我在CSS中将宽度设置为100，高度设置为20时，Chrome Web开发人员检查器会正确显示尺寸。但是，当我刷新页面时，Chrome浏览器会注销一个疯狂的人物（如1904年），并且我的元素位于旁边。 我尝试使用这些不同的方式获取宽度，或者使用display：none或z-index隐藏工具提示： getDimensions（） getSize（） getStyle（\'width \'） element.offsetWidth 所有结果相似。任何人都可以建议解决方法，或者告诉我为什么Chrome会采用这种方式？ 谢谢！ 弗雷德 这是我的JS： 
Tooltip = new Class({

    Implements: Events,Implements: Options,options: {
        target: \'\',// Single element or array of elements
        tip: \'\'                                     // Element to show          
    },initialize: function(options) {
        this.setOptions(options);
        this.setValues();
        this.attachEvents();
    },setValues: function() {     
        this.target = this.options.target;
        this.tip = this.options.tip;
        this.tip.setStyle(\'z-index\',-1);                                                   // Hide tip element
        if (this.target == null || this.tip == null) return;                    // We don\'t have required elements,so return
        this.showing = false;
        this.tipMousedOver = false;
        this.tipDimensions = this.tip.getSize();            // Getting width
        console.log(this.tip);
        console.log(this.tipDimensions.x);
        console.log(this.tip.offsetWidth);

        this.tipFx = new Fx.Morph(this.tip,{
            duration: 350,transition: Fx.Transitions.Sine.easeIn,link: \'cancel\',onComplete: function() {
                if (this.showing) this.showing = false;
                else this.showing = true;
            }.bind(this)
        });
    },attachEvents: function() {

        this.tip.addEvent(\'mouseenter\',function(e) {
            this.tipMousedOver = true;
            document.removeEvents(\'click\');
        }.bind(this));

        this.tip.addEvent(\'mouseleave\',function(e) {
            document.addEvent(\'click\',this.bodyClick.bind(this));  
        }.bind(this));

        if (typeOf(this.target) == \'element\') {
            this.target.addEvent(\'click\',this.toggleTip.bind(this));
        } else {
            this.target.each(function(item,index){
                item.addEvent(\'click\',this.toggleTip.bind(this));
            }.bind(this));
        }

    },toggleTip: function(e) {
        e.stopPropagation();
        if (!this.showing) {
            // HIdden,so show
            var posn = e.target.getPosition();
            var vPosn = posn.y;
            var hPosn = posn.x;
            var targetWidth = e.target.getSize().x;
            this.tip.setStyle(\'z-index\',1);
            this.tip.setStyle(\'top\',vPosn - (this.tipDimensions.y + 10));
            this.tip.setStyle(\'left\',(hPosn + targetWidth /2) - (this.tipDimensions.x / 2));       // Positions middle of tip over middle of target
            console.log(\'targetWidth: \' + targetWidth + \' tipDimensions.x: \' + this.tipDimensions.x);
            this.tipFx.start({\'opacity\': [0,1]});
            document.addEvent(\'click\',this.bodyClick.bind(this));
        } else {
            // Visible,so hide
            if (!this.tipMousedOver) {
                this.tipFx.start({\'opacity\': 0});
                this.tip.setStyle(\'z-index\',1);
                document.removeEvent(\'click\',this.bodyClick);
            }       
        }
    },bodyClick: function(e) {
        this.tipFx.start({\'opacity\': 0});
        this.tip.setStyle(\'z-index\',1);
        document.removeEvents(\'click\',this.bodyClick);
    }

});



window.addEvent(\'domready\',function(){

    new Tooltip({
        target: $(\'comments-list\').getElements(\'.shareLink\'),tip: $(\'shareTip\')
    });

});
HTML： 
<!DOCTYPE html>
<html>
<head>

    <script src=\"js/mootools-core-1.3.2-full-compat.js\"></script>
    <script src=\"js/mootools-more-1.3.2.1.js\"></script>

<script src=\"comments_new_click.js\"></script>

<link href=\"comments_new.css\" type=\"text/css\" rel=\"stylesheet\">
</head>
<body>

    <ul id=\"comments-list\">
        <!-- START COMMENT ITEM -->
        <li id=\"CommentKey-f8b1-45f2-b4f6-68ba740ca9c3\" class=\"commentItem\">
                <div class=\"commentTop clrd\">
                    <span class=\"badges\">
                        <img style=\"width: 32px; height: 32px;\" src=\"\" alt=\"\" title=\"\">
                        <img style=\"width: 32px; height: 32px;\" src=\"\" alt=\"\" title=\"\">
                    </span>
                    <a class=\"avatar\" href=\"javascript:;\" title=\"\">
                        <img src=\"\" alt=\"Photo of editor1\">
                    </a>                
                    <a class=\"username\" href=\"javascript:;\" title=\"\">And Finally</a>
                </div>
                <div class=\"commentBody clrd\">

                    <div class=\"commentOver\">
                        <div class=\"submDateAndTime\">26 April 2011</div>
                    </div>                  

                    <div class=\"commentSide\">
                        <div class=\"likeDislike\">
                            <a class=\"pluck-like alreadyvoted\" href=\"javascript:;\" title=\"\">Like</a>
                            <span class=\"pluck-score\">00000</span>
                            <a class=\"pluck-dislike\" href=\"javascript:;\" title=\"\">Dislike</a> 
                        </div>
                    </div>                  

                    <div class=\"commentText\">
                        Lorem ipsum dolor sit amet,consectetur adipiscing elit. Curabitur a sapien vitae enim sagittis sodales at sit amet leo. Aenean cursus euismod blandit. Suspendisse potenti. Pellentesque vestibulum nisi id dui aliquet consequat. Nulla egestas tortor vel metus dapibus luctus. Nullam rhoncus ullamcorper lorem,non vehicula nulla euismod viverra. Morbi tempus dui ut ipsum interdum ut dapibus est venenatis. 
                    </div>

                </div>
                <div class=\"commentBottom clrd\">

                    <div class=\"getReplies\">
                        <a href=\"javascript:;\" title=\"Show replies to this comment\">See Replies</a>
                        <span>2</span>
                    </div>

                    <!-- To delete -->
                    <div style=\"display:block;clear:both;float:none;height:0\"></div>

                </div>

                <!-- REPLIES -->
                <div id=\"nestedcommentslist-CommentKey:f8b1-45f2-b4f6-68ba740ca9c3\" class=\"repliesWrapper\"></div>
                <!-- END REPLIES -->

        </li>
        <!-- END COMMENT ITEM -->
                <!-- START COMMENT ITEM -->
        <li id=\"CommentKey-f8b1-45f2-b4f6-68ba740ca9c3\" class=\"commentItem\">
                <div class=\"commentTop clrd\">
                    <span class=\"badges\">
                        <img style=\"width: 32px; height: 32px;\" src=\"http://z.x.co.uk/ver1.0/Content/images/store/5/6/3262-4af5-8654-ef59a25b24e1.Full.png\" alt=\"\" title=\"\">
                        <img style=\"width: 32px; height: 32px;\" src=\"http://z.x.co.uk/ver1.0/Content/images/store/5/6/3262-4af5-8654-ef59a25b24e1.Full.png\" alt=\"\" title=\"\">
                    </span>
                    <a class=\"avatar\" href=\"javascript:;\" title=\"\">
                        <img src=\"http://z.x.co.uk/ver1.0/Content/images/store/13/3/f175-45b8-931b-28619aadfd2a.Small.png\" alt=\"Photo of editor1\">
                    </a>                
                    <a class=\"username\" href=\"javascript:;\" title=\"\">And Finally</a>
                </div>
                <div class=\"commentBody clrd\">

                    <div class=\"commentOver\">
                        <div class=\"submDateAndTime\">26 April 2011</div>
                    </div>                      

                    <div class=\"commentText\">
                        Lorem ipsum dolor sit amet,consectetur adipiscing elit. Curabitur a sapien vitae enim sagittis sodales at sit amet leo. Aenean cursus euismod blandit. Suspendisse potenti. Pellentesque vestibulum nisi id dui aliquet consequat. 
                    </div>

                </div>
                <div class=\"commentBottom clrd\">

                        <div class=\"getReplies\">
                            <a href=\"javascript:;\" title=\"Show replies to this comment\">See Replies</a>
                            <span>2</span>
                        </div>

                        <div class=\"share\">
                            <a href=\"javascript:;\" class=\"abuse\" title=\"\">Report abuse</a>
                            <a href=\"javascript:;\" class=\"shareLink\" title=\"\">Share</a>
                        </div>

                        <!-- To delete -->
                        <div style=\"display:block;clear:both;float:none;height:0\"></div>

                </div>
                <!-- REPLIES -->
                <div id=\"nestedcommentslist-CommentKey:f8b1-45f2-b4f6-68ba740ca9c3\" class=\"repliesWrapper\"></div>
                <!-- END REPLIES -->

        </li>
        <!-- END COMMENT ITEM -->
    </ul>

    <div id=\"shareTip\" class=\"popup\">Share and things</div>
</body>
</html>
CSS： 
body {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 62.5%;
}

#comments-list {
    width: 480px;
    margin: 20px auto;
    border: 1px solid #ccc;
    list-style-type: none;
    padding: 0;
}

.commentItem {
    margin-left: 0;
    padding-left: 0;
    font-size: 13px;
}

.avatar {
    margin-right: 5px;
}

.avatar img {
    width: 45px;
    height: 45px;
}

.commentTop {
    position: relative;
    padding: 5px;
    min-height: 48px;
    background: #e8e8eb;
}

.username {
    position: absolute;
    top: 5px;
    height: 1em;
    font-size: 14px;
    text-decoration: none;
}

.badges {
    float: right;
}

.badges img {
    margin-left: 2px;
}

.commentBody {
    padding: 5px;
    background: #f3f2f2;
}

.commentText {
    margin-right: 75px;
    line-height: 16px;
}

.commentOver {
    clear: both;
    float: none;
    height: 14px;
    padding: 0 3px 10px 0;
}

.submDateAndTime {
    float: left;
    color: #777;
    font-size: 11px;
}

.getReplies {
    float: left;
    padding: 0;
}

.getReplies a {
    background-color: #ED9430; /* Put elsewhere */
  background-image: url(\"http://z.x.co.uk/images/comments-wide.png\");
  background-position: -508px -245px;
  background-repeat: no-repeat;
  display: block;
  float: left;
  height: 20px;
  text-indent: -9999px;
  width: 60px;
}

.getReplies span {
  background-image: url(\"http://z.x.co.uk/images/comments-wide.png\");
  background-position: -569px -245px;
  background-repeat: no-repeat;
  display: block;
  float: left;
  font-size: 14px;
  font-weight: bold;
  height: 21px;
  padding-left: 2px;
  text-align: center;
  width: 41px;
  line-height: 19px;
}

.commentBottom {
    padding: 5px;
    background: #f3f2f2;
}

.share {
    float: right;
}

.popup {
    position: absolute;
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
    z-index: 1;
}

.hidden {
    display: none;
}

#shareTip {
    width: 100px;
    height: 20px;
    overflow: hidden;
}
====================================== 后来 对于遇到类似问题的其他人，我发现它是在显示提示元素之前就对其进行了测量，而不是在初始化对象时就消失了。因此，我将显示方法更改为： 
toggleTip: function(e) {
    e.stopPropagation();
    if (!this.showing) {
        // HIdden,so show
        var posn = e.target.getPosition();
        var targetPosnY = posn.y;
        var targetPosnX = posn.x;
        var targetWidth = e.target.getSize().x;
        var targetHeight = e.target.getSize().y;
        var tipSize = this.tip.getSize();
        var tipPosnY = targetPosnY - (tipSize.y + 10);
        var tipPosnX = targetPosnX - (targetWidth / 2);
        this.tip.setStyle(\'z-index\',1);
        this.tip.setPosition({x: tipPosnX,y: tipPosnY});
        this.tipFx.start({\'opacity\': 1});
        document.addEvent(\'click\',this.bodyClick.bind(this));
    } else {
        // Visible,so hide
        if (!this.tipMousedOver) {
            this.tipFx.start({\'opacity\': 0});
            this.tip.setStyle(\'z-index\',1);
            document.removeEvent(\'click\',this.bodyClick);
        }       
    }
},
 我还发现，setPosition（）是一种比setStyle（）更可靠的元素定位方式。     

解决方法

如果仅将最新的浏览器作为目标用户，则可以使用
window.getComputedStyle
来返回绘制在屏幕上的所有css属性和值。 或者只是使用chrome来解决。     
元素元素宽度宽度给出错误错误错误

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...