响应式设计工作在Firefox，失败在Chrome

我有这样类似下面的列表，在Firefox中的图像实际上是与浏览器的宽度扩展一起，但在Chrome中，当我调整图像保持相同大小和<li>部分只需填写与空白空间。 See what I mean here 响应式设计工作在Firefox，失败在Chrome

HTML

<ul> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li> 
</ul>

CSS

li img{ 
    display: block; 
    height: auto; 
    width: 100%; 
    float: left; 
} 
@media screen and (min-width: 307px) and (max-width: 440px) { 
    li{ 
     float:left; 
     width: 50%; 
     height: auto; 
     display: inline-block; 
    } 
} 
@media screen and (min-width: 440px) and (max-width: 480px) { 
    li{ 
     float:left; 
     width: 50%; 
     height: auto; 
     display: inline-block; 
    } 
} 
@media screen and (min-width: 480px) and (max-width: 612px) { 
    li{ 
     float:left; 
     width: 50%; 
     height: auto; 
     display: inline-block; 
    } 
} 
@media screen and (min-width: 612px) and (max-width: 767px) { 
    li{ 
     float:left; 
     width: 33.3333%; 
     height: auto; 
     display: inline-block; 
    } 
} 
@media screen and (min-width: 768px) and (max-width: 901px){ 
    li{ 
     float:left; 
     width: 33.3333%; 
     height: auto; 
     display: inline-block; 
    } 
} 

@media screen and (min-width: 901px) and (max-width: 1024px) { 
    li{ 
     float:left; 
     width: 25%; 
     height: auto; 
     display: inline-block; 
    } 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1024px) and (max-width: 1079px){ 
    li{ 
     float:left; 
     width: 20%; 
     height: auto; 
     display: inline-block; 
    } 
} 
@media only screen and (min-width : 1079px) and (max-width: 1224px) { 
    li{ 
     float:left; 
     width: 20%; 
     height: auto; 
     display: inline-block; 
    } 
} 
@media only screen and (min-width : 1224px) and (max-width: 1530px) { 
    li{ 
     float:left; 
     width: 20%; 
     height: auto; 
     display: inline-block; 
    } 
} 
/* Large screens ----------- */ 
@media only screen and (min-width: 1530px) and (max-width : 1824px) { 
    li{ 
     float:left; 
     width: 16.6666%; 
     height: auto; 
     display: inline-block; 
    } 
} 
/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
    li{ 
     float:left; 
     width: 11.1111%; 
     height: auto; 
     display: inline-block; 
    } 
}

来源

2012-10-06 ngplayground

@-moz-document url-prefix() { 
    li img{ 
     width: 100%; 
     max-width: 100%; 
    } 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) {  
    li img{ 
     max-width: 100%; 
    }  
}

原来我还需要增加最大宽度加了在有条件的浏览器黑客的Firefox和Chrome

来源

2012-10-06 17:25:24 ngplayground

响应式设计工作在Firefox，失败在Chrome

回答

相关问题