Html firefox、Ie和chrome的区别
我的网站在Chrome中的显示与其他浏览器不同。我已经登录了IE、Firefox、Safari和Chrome。除了铬以外,一切都正常 看看CSS,我不确定问题出在哪里 它的3个大小相等的盒子排成一行,彼此相邻。左边和中间的盒子是对齐的,但右边的盒子是高出20像素的铬 以下是框的CSS:Html firefox、Ie和chrome的区别,html,css,google-chrome,firefox,browser,Html,Css,Google Chrome,Firefox,Browser,我的网站在Chrome中的显示与其他浏览器不同。我已经登录了IE、Firefox、Safari和Chrome。除了铬以外,一切都正常 看看CSS,我不确定问题出在哪里 它的3个大小相等的盒子排成一行,彼此相邻。左边和中间的盒子是对齐的,但右边的盒子是高出20像素的铬 以下是框的CSS: #home_boxes { margin: 20px 0 0 0; clear: both; width: 1000px; overflow: hidden; } #home_b
#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>
onClick=“this.value=”/>
有人能看到问题吗。因为我不确定问题是什么,我已经和CSS混在一起有一段时间了,但是没有用。我没有创建此代码,我是从其他人那里继承的。据我所知,它很简单,在3个方框div(
newsletter\u bos
,contact\u box
,about\u box
)下面放置一个clear
,但在main
(home\u box
)div内
像这样的
.clear {
clear: both;
line-height: 0%;
height: 0px;
display: block;
}
这将解决您的问题,并正确对齐所有框。我认为如果它适用于IE、Firefox、Safari,那么chrome可能没有问题。您是否尝试过清除cahe?无法复制该问题。是的,我尝试过清除缓存(ctrl+f5),但没有任何效果。我已经清除了现金。有人有办法吗?