Css float CSS浮动右数值在Mobile Safari中消失

当我在iPhone上查看以下内容时，第二个div的内容不会出现。我在电脑上看到chrome和safari中的两个div。这似乎是移动Safari的一个问题。我发现如果我用诸如“右侧文本”之类的文本替换号码123-456-7890，问题就会消失

#bannerLeft {
    float: left;
    text-transform: uppercase;
    font-size: 1.7em;
    font-weight: bold;
    width: 50%;
}
#bannerRight {
    float: right;
    font-size: 1.7em;
    font-weight: bold;
    width: 30%;
}


<div id="bannerLeft">Left Side Text</div> 
<div id="bannerRight">123-456-7890</div>

#bannerLeft{
浮动：左；
文本转换：大写；
字体大小：1.7em；
字体大小：粗体；
宽度：50%；
}
#横幅灯{
浮动：对；
字体大小：1.7em；
字体大小：粗体；
宽度：30%；
}
左侧文本
123-456-7890

---

有什么建议吗？提前感谢。

首先，您从不通过

id

选择器进行样式设置，这是一种非常糟糕的做法，但很容易解决：

.banner {
 font-size: 1.7em;
 font-weight: bold;
 box-sizing: border-box;
}

.banner.left {
 float: left;
 text-transform: uppercase;
 width: 50%;
}

.banner.right {
 float: left;
 width: 30%;
 text-align: right;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
 clear: both;
}

.clearfix {
 *zoom: 1;
}

<div class="clearfix">
 <div class="banner left">Left Side Text</div> 
 <div class="banner right">123-456-7890</div>
</div>

.banner{
字体大小：1.7em；
字体大小：粗体；
框大小：边框框；
}
.banner.左{
浮动：左；
文本转换：大写；
宽度：50%；
}
.banner.对{
浮动：左；
宽度：30%；
文本对齐：右对齐；
}
.clearfix:之前，
.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}
.clearfix{
*缩放：1；
}
左侧文本
123-456-7890

问题可能是由于每个浏览器默认都有一些填充或边距，这里最简单的解决方案是添加

框大小

css3属性，从而阻止此问题的发生

此外，当浮动对象时，您可能希望将这些元素包装到

clearfix

元素中，以防止重叠

试试我组装的密码笔，也许会有帮助

我还将所有内容向左浮动，您将得到完全相同的结果，只需注意文本对齐属性，如果不是这种情况，您可以向右浮动，它仍然可以工作

---

干杯

感谢您提供的信息和更清洁的解决方案。不幸的是，我的问题仍然存在。使用您提供的html和css，在mobile safari中，我仍然看不到右侧div中的数字，除非我在数字前面加上或附加字符。似乎是一个奇怪的移动狩猎错误，不确定。文本显示，带破折号的数字不显示。这真的很奇怪，我在我的iphone上测试过，它可以工作，你有哪个版本？