Question

我正在开发一个标题：

header

这是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/base1.css">
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="lib/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="lib/js/jquery-ui-1.8.21.custom.min.js"></script>
        <title>Crociere sul web - Ricerca avanzata</title>
    </head>
    <body>
        <div id="header">
            <div id="header_content">
                <div id="text">
                    NAME OF COMPANY
                </div>
                <div id="header_prenotazioni">
                    My prenotation
                </div>
                <div id="header_phone">
                    <img id="phone" src="images/logo/logo_phone.png" /><b>xxxxxxxxxx</b>
                </div>
                <script>
                    ( function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id))
                                return;
                            js = d.createElement(s);
                            js.id = id;
                            js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
                            fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));
                </script>
                <div class="fb-like" data-href="https://www.facebook.com/xxxx" data-send="true" data-layout="button_count" data-width="20" data-show-faces="false" data-font="verdana"></div>
                <div id="area_agenzie">
                    <div align="center">
                        AGENCY AREA
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

这是css：

html, body {
    margin: 0;
    padding: 0
}

div#header {
    width: 100%;
    background-color: #0170a8;
    color: white;
    font-size: 9px;
    font-family: Verdana;
    overflow: hidden;
}
div#header_content {
    margin: 0 auto;
    width: 90em;
    overflow: hidden;

    padding-bottom: 4px;
    padding-top: 4px;

}
div#text{
    float:left;
}

div#header_prenotazioni {
    margin-left: 100px;
    border-left: 1px dotted white;
    border-right: 1px dotted white;
    padding-left: 6px;
    float:left;
    padding-right: 6px;

}
div#header_phone {
    margin-left: 10px;
    font-size: 11px;
    border-right: 1px dotted white;
    padding-right: 6px;
    float:left;
}
div#header_phone img {
    vertical-align: middle;
}
div#area_agenzie {
    background-color: #b5c85f;
    color: #0170a8;
    height: 20px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 11px;
    display: inline-block;
    vertical-align: top;
}
div#area_agenzie div {
    margin-top: 3px;
    padding-left:2px;

    padding-right:2px;

}

我的问题是与IE不兼容.. AGENCY AREA下一行......我该如何解决？有人能帮我吗？感谢!!!

Answer 1

您似乎对大多数人使用float: left，而对最后一个使用display: inline-block。由于你有一个固定宽度的容器，IE的字体渲染似乎足以将最后一个块发送到下一行。

相反，请尝试将所有float: left替换为display: inline-block，而不是width: 90em，请尝试text-align: center;。这应该使所有内容都显示在一行上。

如何使所有浏览器兼容css

1 个答案: