HTML标签中心对齐两侧都会被裁剪

Question

我看到一个只能在iPhone Safari上间歇性地再现的错误（不是在任何其他移动或桌面浏览器上，甚至不是macbook safari）。代码如下：

<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
   <ul ...><li..></li> <!-- some ul containing li omitted for brevity-->

   <label class="certainClassname" style="font-size: small; font-style: italic; width: 100%; text-align: center; background-color: yellow">
{{"msg" | translate}}
   </label>
</div>

在其他样式表中我有：

.certainClassname {
    cursor: pointer;
    word-break: break-all;
}

msg =＆＃34; PKtest！＆＃34;对于我的测试，虽然它通常有另一个值。

问题是当错误再现时，此标签会在边缘被裁剪：

此错误仅在Safari iPhone上显示，而在其他浏览器中均未显示，并且似乎仅在第一次加载页面时发生，而不是稍后。它可能与缩放有关，因为即使iPhone上最小的缩放也能修复它，标签文本（和黄色）也会完全展开。

有人可以帮我诊断一下上面的CSS吗？我已尝试使用标签的css中的每一个进行修复，但没有一个有效：

display: inline;
display: inline-block;
display: block;
padding: 2px 10px 2px 10px; 
margin-left: auto; 
margin-right: auto; 
z-index: 999; 
clear: both;
(all these above tested but none fixes this issue seen intermittently and only on iPhone Safari).

Answer 1

如果不审查工作代码，很难得到这个想法。但我试图运行你的代码，重新生成错误，这是可能的解决方案。让我知道，这是你在找什么？

＆＃13;

＆＃13;

.certainClassname {
    cursor: pointer;
    word-break: break-all;
    font-size: small; 
    font-style: italic; 
    width: 100%; 
    text-align: center; 
    background-color: yellow;
    display: inline-block;
}
ul {
  padding: 0;
}

＆＃13;

<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
   <ul ...><li..></li> <!-- some ul containing li omitted for brevity-->

   <label class="certainClassname">
{{"msg" | translate}}
   </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

标签被裁剪的原因可能是因为style =“overflow：auto; height：calc（100％ - 55px）”对于div。

div是标签的父级。因此，label从其父级继承其样式。您可以考虑去除高度：calc（100％ - 55px）以查看它是否有效

Answer 3

我认为你必须在宽度为div的区域设置标签：100％背景颜色：黄色