考虑以下HTML(JSFiddle link)：
和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相关文章
