在 span 周围环绕文本 - chrome 问题答案

【问题标题】：Wrap text around span - chrome issue在 span 周围环绕文本 - chrome 问题
【发布时间】：2025-12-17 10:30:01
【问题描述】：

在 Chrome 和 Firefox（或 IE9、Opera）中打开此 fiddle 并查看差异。

或看图片：

chrome 的行为可以像 firefox 一样吗？

【问题讨论】：

你为什么要做这样的事情？
@Stano 我知道这是一个例子，但是在这里使用 span 是一种错误的做法，可能他一定是试图以错误的方式得到这个
@Stano 可以使用 div 做得更好
这些类型的问题让我认为“reset.css”在尝试修复浏览器特定问题之前先从一个公平的竞争环境开始

标签： html css google-chrome

【解决方案1】：

只需将样式 'float:left' 赋给 div

<html>
<head>

</head>
<body style="margin:0px; padding: 0px;">

<span style="width: 100px; background:red; float: left; clear: left; height: 4px;" ></span>
<span style="width: 220px; background:red; float: left; clear: left; height: 4px;" ></span>

<div style="float:left">
<span>Test </span>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

我相信不，它不可能。最好的办法是在 Chrome 上以您想要的方式编写此代码，并在检测到用户使用的是 Chrome 还是其他浏览器时使用该版本。详情请见this。

或

您可以使用在所有当前浏览器中看起来相同或相似的代码。对于您的示例，您需要添加：

<span style="float:left">Test </span>

到你的文本。

另一个解决方案是这样的：

<html>
<head>
    <style type="text/css">
        #test{
            position: relative;
            left: 120px;
        }
    </style>

</head>
<body style="margin:0px; padding: 0px;">

<span style="width: 100px; background:red; float: left; clear: left; height: 4px;" ></span> 
<span style="width: 220px; background:red; float: left; clear: left; height: 4px;" ></span> 

<div id = "test">
<span>Test </span>
</div>

</body>
</html>

【讨论】：

向左浮动不是解决方案，当我有更多文本时 - 整个文本都会下降
没有办法（你可以实现）chrome 的行为与 firefox 相同。这对任何人来说都是显而易见的。您需要更清楚、更详细地解释您的问题，以便任何人提供帮助。你想让文本具体做什么？