Firefox 4 和 Firefox 的 CSS 问题5

Question

我的页面有问题： http://www.liraprint.com/knigi

书籍未显示正如它们必须的那样 - 它们被移到右侧。该问题仅出现在 Firefox 4 和 Firefox 中。 5. 在 3.6 中，与所有其他浏览器一样没问题。

我认为这是 .browse_product_image_body{ float:left;这与此有关。或者也许我遗漏了一些东西......你能帮我解决这个问题吗？

这是问题的屏幕截图屏幕截图。

.browse_product_page{
width:547px;
}
.browse_product_header{ 
margin-top:0px;
}
.browse_product_title_background{
width:547px;
height: 40px;
background-image: url(images/product-title-background-tile.png);
margin-top: 0px;
border:1px solid #DBDBDB;
border-top-left-radius:3px;
-moz-border-top-left-radius:3px; /* Firefox 3.6 and earlier */  
border-top-right-radius:3px;
-moz-border-top-right-radius:3px; /* Firefox 3.6 and earlier */ 
}
.browse_product_title{
font-size:24px;
padding:12px 0 0 4px;
float:left;
text-decoration:none;
}
.browse_product_name{
font-size:18px;
padding:12px 0 0 4px;
text-decoration:none;
}
.browse_product_author_body{
width:244px;
height:29px;
float:right;
margin:0 0px 10px 0;
background-image:url(images/author_background.png);
}
.browse_product_author{
font-size:13px;
padding:4px 0 0 0;
margin:0;
font-weight:bold;
}
.browse_product_body{
width:547px;
height:234px;
margin:-20px 0 10px 0;
border:1px solid #DBDBDB;
border-top:1px;
border-bottom-left-radius:3px;
-moz-border-bottom-left-radius:3px; /* Firefox 3.6 and earlier */   
border-bottom-right-radius:3px;
-moz-border-bottom-right-radius:3px; /* Firefox 3.6 and earlier */  }

.browse_product_image_body{
  float:left;
padding:0px 0px 0px 0px; 
margin: 10px 10px 10px 10px;
}
.browse_product_image{
width:123px;
height:190px;
margin:0px 2px 2px 2px; 
padding:2px;
}
.browse_product_description{
width:auto;
height:96px;
margin:0px 0px 0px 0; 
padding:70px 10px 10px 10px;
text-align:justify;
}
.browse_product_price_body{
width:40px;
float:left;
padding: 0px 0 0 0px;
}
.browse_product_price{
font-size:14px;
text-align:left;
font-weight:bold;
}
.browse_product_price_value{
margin-top:-16px;
margin-left:46px;
margin-right:-75px;
}
.browse_product_read_more{
height:30px;
background-image:url(images/browse_read_more.gif);
background-repeat:no-repeat;
margin:0px 47px 0 404px;
padding:5px 0px 0 0;
}
.browse_product_read_more_link{
font-size:14px;
font-weight:bold;
text-decoration:none;
}

Answer 1

最后，我发现了问题所在。看来不仅图像容器 .browse_product_image_body ，而且内部 div .browse_product_image 也必须设置为 float:left 。