Question

I have some pretty simple HTML and CSS stuff going on here and in Chrome and Internet Explorer it works great, however Firefox just like a toddler can't seem to draw within the lines.

Here is the HTML

<div class="Profile_Summary">
    <div id="1984" class="Profile_Summary_Text">
        <h4>Sherlock Holmes</h4><br/>
        221B Baker St.<br/>
        Private Detective<br/>" +
        <span>Scotland Yard <a href=\"mailto:sherlock.holmes@nomail.com\">[Email]</a></span>
</div>
    </div>

here is the CSS

.Profile_Summary{
    height:262px;
    width:224px;
    border:solid 1px;
    float:left;
    margin:15px 0px 15px 25px;
    background-size:100%;
    background-size:cover;
    border-radius:5px;
}

.Profile_Summary_Text{
    background-color: rgba(255, 255, 255, .65);
    padding:0px 0px 0px 6px;/*top right bottom left*/
    height:75px;/*100-9 to adjust for padding-top*/
    width:218px;/*294px;/*300-6 to adjust for padding-left*/
    margin-top:188px;/*250px;/*350 - height(as seen above)*/
    font-size:15px;
    text-decoration:none;
    border-radius:5px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.Email{
    float:right;
    padding-right:4px;
}

The issue I am having is the [Email] text in the <a> does not appear on the same line as the Text immediately before it. For example you have something like

Scotland Yard
                    [Email]

It only happens with Firefox though, and since the Profile_Summary_Text hides overflow the <a> tag is never accessible.

In case it makes a difference I'll also say I am loading multiple of the Profile_Summary divs to a page dynamically. I have tried changing the <span> into <div> and a <p> but neither fixed it. I also set padding and margin to 0% for both the <span> and <a>. I've also tried a bunch of different combination of display:inline and display:inline-block etc. for the <span> and <a> but nothing seems to correct this behavior.

This isn't the first time I've had trouble with Firefox recently so I'm also a little curious if some kind of update was made that messed up their rendering rules. My Primary question is what can I do to fix this?

Answer 1

将您的HTML更改为“

<div class="Profile_Summary">
    <div id="1984" class="Profile_Summary_Text">
    <h4>Sherlock Holmes</h4><br/>
        221B Baker St.<br/>
        Private Detective<br/>" + 
    <span><a href=\"mailto:sherlock.holmes@nomail.com\">[Email]</a>Scotland Yard </span>
    </div>
</div>

换句话说，将电子邮件锚点移动到范围的开头（其容器）。

浮点元素必须先于其他元素才能使内容绕过它，尽管当浮点数正确时，它有点反直觉。

编辑：编辑了锚点的位置，我错误地复制了文本。

Firefox始终呈现<a> on a separate line

1 个答案: