Problem with Display:Table in FireFox_问答_开发者

开发者 https://www.devze.com 2023-04-06 06:27 出处：网络

I need display an image on right of some paragraph without using float. So I come up with this solution which use display:tableto obtain a very similar result.

相关专题：css

I need display an image on right of some paragraph without using float. So I come up with this solution which use display:tableto obtain a very similar result.

My CSS works great on IE8 > but not with any version of Firefox.

As for my understanding Display:table should be support by FF.

Any idea what I'm doing wrong here and how to fix it? Thanks

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
        .box
        {
            display:table;
            background-color:Yellow;
            margin:30px 0px 30px 0px;
        }
        .box p
        {
            background-color:Gray;
        }
        .box h2
        {

        }
        .box img
        {
            display:table-cell;
            vertical-align:top;
        }   
        </style>
    </head>
    <body>
        <div class="box">
            <h2>
                Title 01 here.</h2>
            <p>
                Some text 01 here, Some text 01 here, Some text 01 here, Some text 01 here, Some
                text 01 here, Some text 01 here.</p>
            <img src="http://crackle.imageshack.us/images/blue/cooltool.png" alt="Angry face" />
        </div>
        <div class="box"&开发者_如何学JAVAgt;
            <h2>
                Title 02 here.</h2>
            <p>
                Some text 02 here, Some text 02 here, Some text 02 here, Some text 02 here, Some
                text 02 here, Some text 02 here.</p>
            <img src="http://crackle.imageshack.us/images/blue/cooltool.png" alt="Angry face" />
        </div>
    </body>
    </html>