以下是Chrome在Android上的示例:网站应如何显示:http://imgur.com/yLpB0uw
以下是Ipad Mini 2上的Safari示例: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
答案 0 :(得分:0)
我也提供解决方案:
安装“ autoprefix css”的扩展名 https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer(VS 码) https://github.com/sindresorhus/sublime-autoprefixer(崇高文字)
它会自动将CSS属性呈现给所有浏览器。如果未完成,只需打开css文件并选择所有(ctrl + a)和ctrl + shft + p,然后键入autoprefix css。就是这样!
检查您的CSS文件。