Javascript:在Safari/iOS中计算元素溢出容器的宽度 [英] Javascript: Calculation of width in Safari/iOS for elements overflowing their containers

问题描述

与 http://mkoryak.github.io/floatThead/一起使用时，我的特殊问题首先出现在我身上/a>

My particular problem first occured to me when using with http://mkoryak.github.io/floatThead/

在某些页面上，我有带有列的表.客户选择了水平滚动这些表.因此，这些表被包装在具有overflow-x: auto;

On certain pages I have tables with a of of columns. The client opted for horizontally scrolling these tables. Therefore those tables are wrapped in a div that has overflow-x: auto;

在桌面浏览器和Safari/iOS上运行良好.

Works nice on desktop browsers and Safari/iOS.

在某些时候使用floatThead时，它使用outerWidth()请求表的宽度以设置表头在浮动时的宽度.在iPad上，浮动表头的宽度与wrapper元素一样宽，其余部分将被裁剪.我调试了容器和表的outerWidth()值.

When using floatThead at some point it requests the width of the table with outerWidth() to set the width of the table header when it is floated. On the iPad that floated table header is just as wide as the wrapper element, the rest of it is cropped. I debugged the outerWidth() values of both the container and the table.

在桌面浏览器上，我得到的值例如容器为1200px，但容器内部的宽表为1900px.

On a desktop browser I get values like e.g. 1200px for the container, but 1900px for the much wider table inside of the container.

但是在Safari iOS中，两者容器和表格的像素均为935px.不必将容器元素设置为滚动更大的内容即可产生此错误.我使用Twitter Bootstrap 2.3.2.如果页面上有容器流体，则将其宽度调整为窗口宽度.如果内部有一个较大的桌子，则可以通过overflow: visible;看到它.但是-在iPad上-触发floatThead时，浮动表格标题的宽度被限制为流体容器的宽度(减去其填充).

But in Safari iOS I get 935px for both the container and the table. The container elements doesn't have to be set to scroll larger contents to produce this error. I work with Twitter Bootstrap 2.3.2. If there is a page with a container fluid, its width is adjusted to the window width. If there is a table inside with a larger width, it is visible through overflow: visible;. But – on the iPad – when floatThead is triggered, the floated table headers width gets restricted to the width of the fluid container (minus its padding).

因此，我推测其原因是对较小容器内较大元素宽度的不同计算.

Therefore I presume that the reason for this is a different calculation of the width of bigger elements that are inside smaller containers.

如果我理解正确，jQuery的outherWidth()使用css()检索元素的宽度，而css()使用getComputedStyle或currentStyle.

If I understand it correctly, jQuery's outherWidth() uses css() to retreive the width of elements, and css() uses getComputedStyle or currentStyle.

我假定浏览器返回带有错误值的值，这就是jQuery/floatThead可以使用的全部内容.

I assume the browser returns the "wrong" with values, and that's all jQuery/floatThead can work with.

我想知道我的假设是否正确，或者是否有其他因素触发Safari iOS中宽度的错误"计算.

And I was wondering if my assumption is correct, or if there could be other factors triggering the "wrong" calculation of the width in Safari iOS.

推荐答案

很抱歉，我自己在提出问题之前没有进一步检查它.在对有问题的页面之一进行静态复制并依次删除html，javascript和css代码后，我能够找到原因.

Apologies for not checking into it any further myself before asking the question. After making a static copy of one of the problematic pages and successively deleting html, javascript and css code I was able to track down the reason.

Twitter Bootstrap 2.3.2为表元素设置了max-width: 100&;.在这种情况下(表格位于一个较小的容器中，可以存储其内容)，表格的宽度无需进行任何限制.

Twitter Bootstrap 2.3.2 sets max-width: 100&; for table elements. In the said case (table being inside a smaller container that allows for scolling its contents), the table width doesn't need to be restricted in any way.

它在桌面浏览器中没有引起任何问题.即使在Safari中，表格本身的宽度也很好，并且可以滚动.只是jQuery的outerWidth()接收到错误的值，这导致浮动的thead被裁剪为外部容器的宽度.

It didn't cause any problems in desktop browsers. Even in Safari the width of the table itself was fine and scrolling worked. Just jQuery's outerWidth() received a wrong value, which resulted in the floated thead being cropped to the width of the outer container.

这篇关于Javascript:在Safari/iOS中计算元素溢出容器的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！