1

Here is a very simple html page. WIth IE(checked 8,10), the text exceeds its container. But such problem doesn't occur with FF, Chrome. 

<!DOCTYPE html>
<html>
    <body>  
        <div style="display:inline-block;border:1px solid black">       
        <table>
            <caption><nobr>I' m table caption</nobr></caption>                                                                                      
        </table>                                            
    </div>  
    </body>
</html>

The table's "caption" tag seems to be the cause. Does someone know why it behaves differently in IE? Thanks.

David Shi
  • 11
  • 3
  • The cause of the issue is the `display:inline-block` of the div style. See the following [JSFiddle](http://jsfiddle.net/uWPEb/2/) for the behaviour with the `display:block` style. The following SO question can help you with this : http://stackoverflow.com/questions/4750088/css-display-inline-block-issue-with-ie – Nunners Oct 09 '13 at 07:52
  • 1
    IE forgets to look at the caption when it calculates the width of the table. It's most likely a bug. – Mr Lister Oct 09 '13 at 07:58
  • The "inline-block" and border are just for visually presenting the width problem. Thanks guys, I also believe this is a bug of IE now. – David Shi Oct 10 '13 at 02:32

1 Answers1

0

The cause of the issue is the display:inline-block of the div style.

See the following JSFiddle for the behaviour with the display:block style. The following SO question should be able to help you with this :

CSS Display inline-block issue with IE

Edit:

It appears from this Fiddle that IE does not correctly calculate the Table width including the caption as @MrLister explains.

Community
  • 1
  • 1
Nunners
  • 3,047
  • 13
  • 17
  • No! The same issue exists without the inline block. IE calculates the width of the table wrong. See [this fiddle](http://jsfiddle.net/hAsKu/) where IE also ignores the width of the caption. – Mr Lister Oct 09 '13 at 07:56
  • That is because in that fiddle you have set the `float:left` style property. If you remove this from the table it appears correct. – Nunners Oct 09 '13 at 08:00
  • @MrLister The following [Fiddle](http://jsfiddle.net/x9qdt/) Shows what you are explaining in a more understandable way. I see you are now correct about IE not calculating the width of the caption. – Nunners Oct 09 '13 at 08:04
  • Here, [a fiddle](http://jsfiddle.net/hAsKu/1/) that doesn't have float or inline blocks. Just a table. IE reports 14 for the width of the table, other browsers report 111. (This may vary a bit depending on your font, but you get the idea.) – Mr Lister Oct 09 '13 at 08:05
  • You are correct sir! I wonder if Microsoft know of this bug, I can't seem to find any reference to it by searching... – Nunners Oct 09 '13 at 08:09
  • Oops, my conclusion about "other browsers" was premature. Firefox and Opera report 14 as well. Sorry. – Mr Lister Oct 09 '13 at 08:09
  • That seems strange, Chrome seems to work fine. I wonder if this is actually a bug or by design. – Nunners Oct 09 '13 at 08:13
  • With my example in FF, The div seems to respect "caption" when calculating width(but the table doesn't). weird... – David Shi Oct 10 '13 at 05:39