html - Div 从屏幕右侧溢出 - iphone

Question

我有一个随 javascript 弹出的 div，现在在所有浏览器上都运行良好……除了 iPhone。在 iphone 上它不会换行，而是将 div 的宽度扩展到屏幕右侧，我无法查看详细信息。

我已经在我的安卓手机上测试过了，一切正常。我创建了一个 jsfiddle，但我不认为我可以在那里模拟不同的设备:http://jsfiddle.net/rasweat/xwx6o8ap/

这是我的 CSS 代码:(我认为它处理了 safari，但我想不是)

.PopupPanel
{
    border: solid 2px black;
    position: fixed;
    background-color:#FFFFFF;
    z-index: 100000;
    border-radius: 10px;
    padding:10px;
    overflow: auto;

    left: 50%;
    top: 50%;

    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(-50%, -50%);   

    width: 90%;
    height: 90%;
    box-shadow: 10px 10px 5px #888888;
}

Answer 1

正如@Pangloss 所指出的，不同的部分是 -webkit-transform: translate(50px,100px); 声明，因为所有版本的 Safari(包括 Safari 8 ) 本身不支持 transform 属性，这意味着 Safari 仅呈现 -webkit-transform。

-ms-transform: translate(-50%, -50%); /* IE 9 */

/*Changed the code below this*/
-webkit-transform: translate(-50%, -50%); /* Safari */
/*Changed the code above this*/

transform: translate(-50%, -50%); /* Rest of the world */

最新:Firefox、Chrome 和 Opera(基于 Blink)不受影响。

在这里了解更多 - http://caniuse.com/#feat=transforms2d