如何解决铬给出错误的元素宽度
| 我正在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\')
});
});
<!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>
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);
}
}
},解决方法
如果仅将最新的浏览器作为目标用户，则可以使用
window.getComputedStyle
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。