CODEWITHSUNDEEP
htmlcssinternet-explorer
Robert002
Robert002

Reputation: 73

IE changes elements arrangement based on their content

If span content contains dots in the begining <span>.filename</span> then Internet Explorer won't reflow them.

How to make IE reflow spans without the need to remove the dots?

JS Fiddle demo: with dots in content - use IE
JS Fiddle demo: without dots

P.S. If <span> changed to <li> problem remain.

Upvotes: 0

Views: 68

Answers (3)

Jayesh Amin
Jayesh Amin

Reputation: 324

Here's another way to achieve it: Include display:inline-block in your div and then apply css to your span tag by inheriting from your div.

Example:

<div style="background-color:black;display:inline-block;"> 

span {
  display:inherit;     
}

Upvotes: 1

Spudley
Spudley

Reputation: 168755

Yes, you're right. This does look wrong.

A quick solution would be to change the display type of your span elements to inline-block.

In your fiddle, add:

span {
    display:inline-block;
}

...in the CSS panel. This will make IE work as expected. See updated fiddle here.

It doesn't actually fix the issue; it just works around it, but it does solve the problem as far as your fiddle is concerned.

Hopefully it'll work for you in your actual site as well (it should do, but obviously depends on your page layout; inline and inline-block do work differently, so it is possible there could be some odd edge cases).

Upvotes: 2

Sergey Kochetov
Sergey Kochetov

Reputation: 390

I have no idea why IE behaves in that way, but In your case you can try go with 

span {
    display:inline-block;
}

Upvotes: 2

Related Questions