firefox、ie和chrome的区别答案

【问题标题】：Differences between firefox, Ie and chromefirefox、ie和chrome的区别
【发布时间】：2013-03-08 03:11:01
【问题描述】：

我的网站在 Chrome 中的显示与其他浏览器不同。我检查过 IE、Firefox、Safari 和 Chrome。除了 Chrome，一切都还好。

查看 CSS 我不确定是什么问题。

它的 3 个大小相同的框彼此相邻。左侧和中间的框对齐，但右侧的框在 Chrome 中高出 20px。

这是盒子的 CSS：

#home_boxes {
    margin: 20px 0 0 0;
    clear: both;
    width: 1000px;
    overflow: hidden;
}

#home_boxes p {
    margin-top: 0;
    font-size: 10pt;
}
#home_boxes h2 {
        margin-top: 0;
        margin-bottom: 5px;
        font-size: 14pt;
        font-family: Verdana, Arial, Geneva, sans-serif;
    }

#home_boxes .box_content {
        width: 220px;
        float: right;
        padding: 5px;
    }

#contact_box {
    width: 318px;
    min-height: 150px;
    height: 100%;
    background: url('../images/3box/contact.png') no-repeat #efefef;
    float: left;
    margin-right: 20px;
    border: 1px solid #c9c9c9;
}

#contact_box:hover {
    background: url('../images/3box/contact-hover.png') no-repeat #00529f;
    border: 1px solid #c9c9c9;
    color: #fff;
}

#about_box {
    width: 318px;
    min-height: 150px;
    height: 100%;
    background: url('../images/3box/about.png') no-repeat #efefef;
    float: right;
    margin-right: 20px;
    border: 1px solid #c9c9c9;
}

#about_box:hover {
    background: url('../images/3box/about-hover.png') no-repeat #00529f;
    border: 1px solid #c9c9c9;
    color: #fff;
}

#home_boxes #side_newsletter_box {
    width: 320px;
    background: url('../images/3box/newsletter.png') no-repeat;
    overflow: hidden;
    float: right;
}

#newsletter_box {
    width: 318px;
    min-height: 150px;
    height: 100%;
    background: url('../images/3box/newsletter.png') no-repeat #efefef;
    float: right;
    border: 1px solid #c9c9c9;
}


#newsletter_box:hover {
    background: url('../images/3box/newsletter-hover.png') no-repeat #00529f;
    border: 1px solid #c9c9c9;
    color: #fff;
}

这里是 HTML：

    <div id = "home_boxes">

        <div id="newsletter_box">
            <div class = "box_content">
                <h2><?=get_content(610)?></h2>
                <p><?=get_content(3234)?></p>
                <form action = <?=$myroot?>"newsletter_process.php" method = "post">
                    <input type = "text" name = "email" class = "news_signup_input" value = <?=get_content(27)?> onClick = "this.value=''" />
                    <input type = "submit" name = "newsletter_submit" value = "" class = "news_signup_submit" />
                </form>
            </div>
        </div>

    <a href = "contact">
    <div id = "contact_box">
        <div class = "box_content">
            <h2><?=get_content(1641)?></h2>
            <p><?=get_content(3257)?></p>
        </div>
    </div>
    </a>

    <a href = "about">
    <div id = "about_box">
        <div class = "box_content">
            <h2><?=get_content(3236)?></h2>
            <p><?=get_content(3749)?></p>
        </div>
    </div>
    </a>
</div>

有人能看出问题吗。由于我不确定问题是什么，我一直在搞乱 CSS 一段时间但无济于事。这段代码不是我创建的，我是从别人那里得到的。

【问题讨论】：

我认为如果它适用于 IE、Firefox、Safari 那么它对于 chrome 可能没有问题你尝试过 clear cahe 吗？
无法复制问题。 jsfiddle.net/BSBSy
是的，我试过清除缓存 (ctrl + f5)，但它什么也没做
我已经结清了现金。有人有某种解决方案吗？

标签： html css google-chrome firefox browser

【解决方案1】：

据我所知，它很简单，在 3 个框 div（newsletter_bos、contact_box、about_box）下方但在 main（home_boxes）div 内放置一个 clear。

类似的东西

.clear {
clear: both;
line-height: 0%;
height: 0px;
display: block;
}

这应该可以解决您的问题并正确对齐所有框。

【讨论】：