CODEWITHSUNDEEP
htmlcssinternet-explorer-11
user3758078
user3758078

Reputation:

IE11 Border Issue

I have an <h1> tag with a solid border, but for some reason the border does not go all the way around the element. It happens sometimes on IE11 and also when I reload the site it(*border) behaves weird, but sometimes it looks fine.

There's no consistency and it seems to happen randomly. Also when it does happen, the border stops at different points each time and it always near the end.

HTML:

<h1><span style="color:#FFFFFF"><span class="highlight">LOREM</span>&nbsp;IPSUM DOLOR SIT AMET CONTETEUR</span></h1>

CSS:

.block h1 {
    border: solid 5px white;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Upvotes: 13

Views: 5248

Answers (7)

fieldtraveller
fieldtraveller

Reputation: 55

Check out Bootstrap class ".clearfix"

Upvotes: 2

user5125729
user5125729

Reputation:

I did a little research and believe that it's a bug in IE. If you change the h1 to a p tag then make the font the size you desire it will render correctly.

Here is the site I found the info at. https://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

You could also try this meta tag.

<meta http-equiv="X-UA-Compatible" content="IE=10" />

I can't reproduce the error but this was awarded a bounty here https://superuser.com/questions/838802/ie11-renders-elements-with-border-radius-incorrectly

Upvotes: 2

AndW99
AndW99

Reputation: 552

If the issue was resolved with removing the web font, and only occurs intermittently when reloading; could this be caused by a timing inconsistency when refreshing? For instance, sometimes the font is loaded before the element is calculated (the good result) and sometimes after (resulting in the border being displayed based upon the boundary of what IE11 identifies as the fallback font).

Upvotes: 8

CreativePS
CreativePS

Reputation: 1093

Please add this class, it will work in IE :)

.text-element-14 h1 span{
   display:inline-block;
}

Try this and then add the border

Upvotes: 4

lyndact
lyndact

Reputation: 1

.text-element-14 h1 span {
     border: solid 5px white;
     display: inline-block;
     padding: 10px 20px 10px 20px;
     margin: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

Upvotes: 2

wiesion
wiesion

Reputation: 2435

This is probably happening only when developer tools are open and testing locally, and even then not regularly. You can observe this behavior also in IE10, where it does happen as well (just not as often as in IE11).

I think this is one of the most weird bugs in the recent history of IE, and it's not like that's an easy challenge, also i couldn't find it mentioned in any docs or how to workaround this properly. I just remember this bug from some time ago, and since it didn't make any problems in production for people without developer tools activated, we left it the way it was.

Though from my understanding of the problem, i think it could be solved by creating an HTML inline element and get its size before DOM ready/webfont loaded, then start an interval to check for changed HTML inline element size and trigger and revert a DOM change on that element. Let me know if you need help with making a script, just in case, but i think you'll not be able to reproduce this issue on the production version so i'm not sure if you're still interested in solving this.

Upvotes: 2

Gust van de Wal
Gust van de Wal

Reputation: 5291

Since I haven't been able to reproduce the issue, while in IE 11, I suggest changing the way you nest the elements. Instead of

<h1>
    <span style="color:#FFFFFF">
        <span class="highlight">LOREM</span>
        &nbsp;IPSUM DOLOR SIT AMET CONTETEUR
    </span>
</h1>

I'd go for

<h1 style="color:#FFFFFF">
    <span class="highlight">LOREM</span>
    &nbsp;IPSUM DOLOR SIT AMET CONTETEUR
</h1>

Hope this helps

Upvotes: 2

Related Questions