logo标签列表

CSS3在Safari iOS和iPad上的边框奇怪行为

htmlioscss
10

我在iOS Safari浏览器（不是Safari桌面版，也不是Chrome桌面版和Chrome移动版）上遇到了一个非常奇怪的问题。

我有一些可以被用户拖动的div元素。当用户进行"预览"时，在iOS Safari移动版中，文本会出现"包装"(wrapper)，因为它没有足够的空间来呈现它，就像这样:

Lorem Ipsum Text

Lorem Ipsum <- 由于边框导致的换行问题，没有足够的空间。

Text

这些div元素：

<div class="text-perfect-correction" style="opacity: 1; font-family: Lato; left: 594px; top: 386px; font-size: 50px; color: rgb(0, 0, 0); width: 472px; height: 103px; position: absolute; display: block;">
        <div style="display:inherit;" class="text-div" spellcheck="false">
            <p>
                <span style="color:#696969"><strong>Lorem ipsum text</strong></span>
            </p>
        </div>
    </div>

这些 CSS 类的写法如下：

.text-perfect-correction {
  border-width: 6px;
  border-color: transparent;
  border-style: dotted;
  padding: 5px;
  margin: -11px;
}

.text-div {
  -webkit-line-break: after-white-space;
  display: inline;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

我使用 perfect-correction-class，因为当您点击 div 时，我会显示一些按钮，并显示一个 border 来向用户展示哪个 div 被选择。

在其他所有浏览器中，我都能正确地看到：

Lorem impsum text Lorem impsum text <- 没有换行

这方面有任何问题吗？

谢谢！

2个回答
8
问题不是特定于iOS - 而是您做出了冒险的假设。
首先，让我们看看您所做的事情：
  • 给父元素一个确切的宽度为472px
  • 将字体大小设置为50px
  • 将字体系列设置为Lato
  • 假设您的文本在这些测量值上总是适合一行
问题在于不同的呈现引擎不会始终完全相同地呈现字体，可能会有轻微差异，例如在iOS上导致几个像素更多的宽度。在一个浏览器中将字体大小推到极限，然后只假设其他浏览器中的所有内容都看起来不错，这是非常危险的。 除此之外，可能存在加载Lato的问题，使浏览器退回到不同的字体，该字体可能使用更多的水平空间。
我将您的代码复制到JSFiddle中，因为未导入Lato（也未在我的计算机上），因此将以默认无衬线字体呈现。在Chrome中，文本适合一行，但在Firefox中，它在ipsum之后断开。
解决方案
有几种方法可以确保您的文本仍然在一行上。
预防换行
您可以使用CSS防止空格换行，这意味着整个文本将被强制放在一行上：
.text-div {
    white-space: nowrap;
}

JSFiddle

省略号

除了上述方法，你还可以使用省略号(...)来截断溢出的文本：

.text-div p span strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

JSFiddle

使文字变小

当然，您也可以简单地减小字体大小，以便在渲染时避免轻微差异带来的问题。

0

我知道iOS是一个难以设计的浏览器，但从我所看到的来看，您的边距可能会让您出现问题。class="text-perfect-correction"有left: 594px;和width: 472px;，字体大小为50px，因此取决于您在哪种iPhone上查看它，可能会出现大小/边距问题。请使用更少的像素进行测试。这是我个人在iOS上遇到的最大问题。

idev101.com
iPhone设计技巧

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接