2011-06-29 33 views
0

我有一个问题,此页面:http://www.liraprint.com/knigiCSS问题与Firefox 4及5

书不是显示为它们必须是 - 他们在向右移动。问题只出现在Firefox 4中& 5.在3.6中可以像所有其他浏览器一样使用。

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

下面是截图screenshot的问题。

.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; 
} 
+0

对不起,我还没有给你答案,但如果它有帮助,我使用Firefox 5.0和网站看起来[很好](http://i.imgur.com/SReTg.jpg)(即不喜欢屏幕截图)。 –

回答

1

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