Question

我在IE中遇到span元素有问题（目前针对IE9和IE10进行了测试）。当我打开 F12 开发者工具并选择span元素时，我无法在屏幕上找到它。但是，如果我手动分配background-color或transparent以外的inherit，则会显示在预期的位置。

问题是，span元素用作弹出窗口的对齐元素，但由于缺少该元素，弹出窗口未正确对齐。

我无法在jsfiddle中观察到这种行为。而且也无法在其他浏览器中测试它。

以下是重要标记的外观：

<div id="div1">
    <div id="div2">
        <span>
            <input id="in" value="Somename"></input>
            <label for="in">Person surname:</label>
        </span>
    </div>
</div>

开发人员工具中显示的相应CSS（background-color属性除外）：

#div1 {
    background-color: grey;

    cursor: auto;
    font-family: Thoma, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    color: #000000;
    bottom: 0px;
    height: auto;
    left: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: auto;
}
#div2 {
    background-color: blue;

    cursor: auto;
    font-family: Thoma, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    color: #000000;
}
span {
    /* background-color: red; */

    font-family: Thoma, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    color: #000000;
    margin-left: 0px;
    margin-right: 0px;
    box-sizing: border-box;
    width: 100%;
}
input {
    /*background-color: transparent;*/

    color: #000000;
    padding: 1px 2px 1px 3px;
    font-family: Thoma, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    margin: 1px;
    border: 1px solid #b9b9b4;
    overflow-x: hidden;
    overflow-y: auto;
    width: 90%; 
}
label {
    cursor: auto;
    font-family: Thoma, Verdana, Helvetica, sans-serif;
    font-weight: normal;
    text-align: left;
    color: #000000;
    left: 0px;
    top: -99999px;
    font-size: 0px;
    position: absolute;
}

任何想法，为什么span标签可能会丢失？

也许我应该澄清，我对解决方案不太感兴趣（因为我已经找到了解决方案），但在解释中为什么我会观察到这种不同的行为。 IE和Jsfiddle以及没有背景颜色的vs。

我不对HTML标记负责，也不能改变它。我只能有限地更改CSS。

Answer 1

将“ display：block; ”添加到span元素css。

span元素默认显示属性为内嵌，使用此您无法设置宽度，高度，边距或填充属性。因此span元素不会丢失，但宽度为0px，字体属性的行高为高度。

问候！

Answer 2

使用 display：block 或 float：left 在IE9-10上测试

另请注意：使用div代替，span标记不是设计为使用这样，而不是创建另一个 #div3 的问题，除非你有特定的东西。

span {
        background-color: red;
        display:block; /* float:left; */
        font-family: Thoma, Verdana, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: normal;
        text-align: left;
        color: #000000;
        margin-left: 0px;
        margin-right: 0px;
        box-sizing: border-box;
        width: 100%;
    }

Answer 3

定义和用法 <span>标记用于对文档中的inline-elements进行分组。

<span>标记本身不会发生任何视觉变化。

<span>标记提供了一种向文本的一部分或文档的一部分添加钩子的方法。

<强> more about span

缺少span元素

3 个答案: