考虑以下HTML(JSFiddle link)：
Box">catBox rotate">catBox">
和CSS：
.Box { font-size:500%; }
.rotate { transform: rotate(-90deg); }
使用.getBoundingClientRect()测量元素id = a的宽度和高度
$(a)[0].getBoundingClientRect().width
$(a)[0].getBoundingClientRect().height
给出(320,91)的尺寸.在元素id = b上测量相同的东西给出了转置尺寸(91,320).精彩.
但是,当我尝试测量元素id = c时,它只是将旋转嵌入内部div中,我得到原始尺寸(320,91)！ b和c的边界框不应该相同吗？
如果没有,我怎样才能让c的边界框正确报告？
如果相关,我使用的是Chromium,版本37.0.2062.120 Ubuntu 12.04(281580)(64位).
最佳答案
不,c中的旋转位延伸出c,而不改变其大小.这应该让它更清晰一些：
var bBox_a = document.getElementById("a").getBoundingClientRect();
snippet.log("a: " + bBox_a.width + "x" + bBox_a.height);
var bBox_b = document.getElementById("b").getBoundingClientRect();
snippet.log("b: " + bBox_b.width + "x" + bBox_b.height);
var bBox_c = document.getElementById("c").getBoundingClientRect();
snippet.log("c: " + bBox_c.width + "x" + bBox_c.height);
.Box {
font-size:500%;
}
.rotate {
transform: rotate(-90deg);
}
#a {
border: 1px solid black;
}
#b {
border: 1px solid red;
}
#c {
border: 1px solid green;
}
#c .rotate {
border: 2px solid yellow;
}
Box">catBox rotate">catBox">
Meta.stackexchange.com/a/242144/134069 -->
猜你在找的HTML相关文章
