javascript - 跨设备 CSS 问题

Question

我刚刚使用 Google Chrome 桌面版和移动版测试了我的网站，滑出式菜单的标签似乎没有显示。它确实有效，只是没有显示，我不知道为什么。更改位置在这里不起作用，因为我使用的滑出式设计依赖于位置，我需要它们固定。

相关 CSS:

#slideout #label {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    display:block;
    float:right;
    margin:46% 0 0 0;
    padding: 0 2px 6px 2px;
    font-size: 20px;
    position: fixed;
    left:-36px;
    -webkit-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -moz-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -o-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    background-color:#fff;
    border-bottom:0 !important;
    border-radius:8px 8px 0 0;
}

#slideout.opened #label {
    left: 86px;
}

JavaScript:

$('#label').on('click',function(){
    $('#slideout').toggleClass('opened');
});

---

编辑:我尝试使用这段代码:

#slideout #label {
    position: absolute;
    left: 90px;
}
#slideout {
    position: relative;
}

但实际情况是，标签在正确的位置，但它被切断了并且看不见了。

Answer 1

position:fixed 在移动设备上是不可预测的，你应该可以通过切换到 position:relative 来修复它；尽管这可能很困难。这里有一些不错的报道:http://www.quirksmode.org/blog/archives/2012/10/budding_consens.html