以下是Chrome在Android上的示例:网站应该如何:http://imgur.com/yLpB0uw
这里是Safari在Ipad Mini 2上的一个例子:http://imgur.com/qbYA8ZA
Safari版本没有显示标题的正确字体,最重要的是它不显示应该在左侧的那些链接。
所以这里是代码的HTML位,在左边显示那些链接,如1.0.0.46或其他。
echo '<div class="patch_table">';
echo '<a class="patchlink" href="'.$patch.'">
<div class="patch_big">'.$patch.'</div>
</a>';
echo '<div class="patch_small">';
这是css描述这些类
.patchlink{
color: white;
font-size: 80%;
width: 28px;
position: relative;
background-color: rgba(102, 153, 255, 0.7);
transition: all 0.4s ease-in-out;
margin-bottom: 4px;
}
.patchlink:hover{
background-color: rgb(102, 153, 255);
}
.patch_small{
display: flex;
flex: 1;
flex-direction: column;
-webkit-flex: 1;
-webkit-flex-direction: column;
}
.patch_big{
position: absolute;
width: 15px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: 7px;
text-align: center;
display: inline-block;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
-webkit-transform: rotate(-90deg) translate(-100%, 0);
-webkit-transform-origin: 0 0;
}
.patch_table{
margin-top: 5px;
display: flex;
flex: 1;
}
这里也是该网站的链接:http://89.68.17.183/LeagueNotes/Graves
我找到了解决方案: