缺少跨度元素

Question

I have a problem with a span element in IE (currently tested against IE9 and IE10). When I open F12 Developer Tools and select that span element I can't find it on screen. However, if I manually assign a background-color other than transparent or inherit it is shown at its expected place.

The problem is, that the span element is used as alignment element for a popup, but since the element is missing, the popup is incorrectly aligned.

I wasn't able to observe that behavior in jsfiddle , yet. And also can't test it in other browsers.

Here is how the significant markup looks like:

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

And the corresponding CSS like shown in the developer tools (except for the background-color attributes):

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

Any ideas, why the span tag could be missing?

Maybe I should clarify, I'am not so much interested in a solution (since I already found one), but in an explanation why I observe this different behavior. Both for IE vs Jsfiddle and with vs without background-color.

I am not responsible for the HTML markup, and can't change that. I have only limited access to change the CSS.

Answer 1

Add " display: block; " to the span element css.

The span element default display property is inline and with this you can't set width, height, margin or padding properties. So the span element is not missing but have a 0px width and the height of the line-height of font property.

Regards!

Answer 2

Either use display:block or float:left Tested on IE9-10

Also note that: use div instead, span tag is not designed to use like this and not a problem to create another #div3 unless you have something specific.

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

Definition and Usage The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a part of a text or a part of a document.

more about span