DIV 包装器/居中不能跨浏览器工作答案

【问题标题】：DIV wrapper/centering not working cross browserDIV 包装器/居中不能跨浏览器工作
【发布时间】：2015-07-11 10:10:43
【问题描述】：

我将两个 div 并排放置在一个包装器中。它就像我在 Chrome 上设计的那样工作，但在 IE 和 FF 上看起来都很可怕。我不知道还能尝试什么，因为我在我能想到的每个地方都尝试了clear:both;，但一切看起来仍然很糟糕。请帮忙！谢谢！

网页是：http://www.thorelectriclongboards.com/contact.php

我不知道需要多少，但这是网页的代码：

<html>
    <head>
        <title>Thor Electric Longboards</title>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
        <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    </head>

<style>
    .title {
        font-weight: 800;
        font-size: 20px;
        background-color: rgba(255, 255, 255, 0.0);
        margin-bottom: 24px;
        text-align: center;
    }
    input[type=submit] {
        background-color: #000080;
        color: white;
        font-size: 16px;
        width: 100%;
        border: none;
        letter-spacing: 3px;
        cursor: pointer;
        padding: 3px;
        margin-top: 8px;
    }
    input[type=text] {
        line-height: 37px;
        border: none;
        width: 100%;
        text-indent: 10px;
        font-size: 18px;
        box-sizing: content-box;
    }
    input[type=email] {
        line-height: 37px;
        border: none;
        width: 100%;
        text-indent: 10px;
        font-size: 18px;
        box-sizing: content-box;
    }
    input:focus {
        outline: none;
    }
    textarea {
        border: none;
        line-height: 20px;
        font-size: 18px;
        resize: none;
        padding-left: 10px;
        padding-top: 5px;
        outline: none;
    }
    .contact {
        text-align: left;
        border-collapse: collapse;
    }
    .lab {
        background-color: #f7941e;
        text-align: right;
        vertical-align: top;
        overflow: auto;
        padding: 10px;
        border: 1px solid #000080;
        border-right: none;
        width: 8%;
        float: left;
        color: white;
    }
    form {
        margin: 0 auto;
        background: transparent;
        width: 50%;
    }
    .table-form {
        border-collapse: collapse;
        width: 27%;
    }
    tr {
        padding-top: 10px;
        padding-bottom: 10px;           
    }
    .spacer {
        padding-top: 6px;
        padding-bottom: 6px;
        background: transparent;
    }
    .side {
        background-color: transparent;
        width: 50%;
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
        letter-spacing: 2px;
    }
    .side > a {
        display: inline-block;
        background-color: transparent;
        vertical-align: middle;
    }
    .contact-img {
        width: 20px;
        height: 20px;
        margin: 15px;
        padding: 12px;
        border: 1px solid #3c5a99;
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        background-color: transparent;
    }
    .contact-img:hover {
        opacity: 0.5;
    }
    .wrapper {
        display: inline-block;
        white-space: nowrap;
        background: transparent;
        overflow: hidden;
    }
    label {
        background-color: transparent;
        font-style: italic;
    }
</style>

<body id="background">
    <?php include 'header.html'; ?>
    <div class='main'>
        <div class='title'>CONTACT US USING ANY OF THE OPTIONS BELOW</div>
        <div class='wrapper'>
            <div class='side' style='float:left;'>
                <form id='contact-us' action='' method='POST'>
                    <table class='table-form'>
                        <tr style='border: 1px solid #000080;'>
                            <td class='lab'>NAME</td>
                            <td><input type="text" name='name'></td>
                        </tr>
                        <tr><td class='spacer'></td><td class='spacer'></td></tr>
                        <tr style='border: 1px solid #000080;'>
                            <td class='lab'>EMAIL</td>
                            <td><input type="email" name='email'></td>
                        </tr>
                        <tr><td class='spacer'></td><td class='spacer'></td></tr>
                        <tr style='border: 1px solid #000080;'>
                            <td class='lab'>MESSAGE</td>
                            <td><textarea name='message' rows="6"></textarea></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input type="submit" name='submit' value="SEND"></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class='side' style='float:right; text-align: left;'>
                <a href='https://www.facebook.com/pages/Thor-Electric-Longboards/1533188433635268' target='_blank'><img class='fb contact-img' src='img/facebook-blue.png' id='fb'></a><label for='fb'>THOR ELECTRIC LONGBOARDS</label><br>
                <a href='https://twitter.com/thorlongboards' target='_blank'><img class='tw contact-img' src='img/twitter-blue.png' id='tw'></a><label for='tw'>@thorlongboards</label><br>
                <a href='https://instagram.com/thor_electric_longboards' target='_blank'><img class='ig contact-img' src='img/instagram-blue.png' id='ig'></a><label for='ig'>THOR_ELECTRIC_LONGBOARDS</label>
            </div>
        </div>          
    </div>
    <?php include 'footer.html'; ?>     
</body>

header.html 或 footer.html 中唯一会影响这一点的是：

    .main {
        background-color: rgba(255, 255, 255, 0.7);
        color: #121b1c;
        width: 80%;
        margin: 50px auto;
        padding: 25px;
        overflow: hidden;
        text-align: center;
        border: 1px solid black;
    }

如果可以的话请帮忙！！！

【问题讨论】：

删除所有浮动和内联样式更改.wrapper以显示：块

标签： html css google-chrome internet-explorer firefox

【解决方案1】：

看看这是否有帮助：

将此width:100%; 添加到.wrapper 并从.lab 类中删除float:left;。

【讨论】：

【解决方案2】：

您的问题不是为您的包装器定义宽度范围。添加 width:100% 你的包装类，它应该可以解决问题。

example here

【讨论】：

【解决方案3】：

浮动块化元素。所以你的table-cells 变成了blocks。这打破了桌子。

删除

.lab {
  float: left;
}

【讨论】：