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>

其他风格sheet我有：

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

msg = "PKtest!" 用于我的测试，尽管它通常有另一个值。

问题是当错误重现如下时，这个标签的边缘被裁剪了：

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

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

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

我认为你必须在 div 周围设置标签，宽度：100% 背景颜色：黄色

Answer 2

如果不查看工作代码就很难理解这个想法。但我尝试运行你的代码，重新生成错误，这是可能的解决方案。让我知道，这是您要找的东西吗？

.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;
}

<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>

Answer 3

标签被裁剪的原因可能是 div 的样式="overflow: auto; height: calc(100% - 55px)"。

div 是标签的父级。因此标签从其父级继承其样式。您可以考虑删除 height: calc(100% - 55px) 以查看它是否有效

HTML 标签中心对齐，两边都被裁剪

HTML label center aligned getting cropped on both sides

html

css

label

mobile-safari

angularjs