0

以下のようなリストがあります。Firefox では、画像は実際にはブラウザーの幅に合わせて拡大縮小されますが、Chrome では画像のサイズを変更しても同じサイズのままで、<li>セクションは空白で埋められます。私がここで何を意味するか見てください

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;
    }
}
4

1 に答える 1

0 
@-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の条件付きブラウザハッキングに屈したmax-width addを追加する必要があることが判明しました

于 2012-10-06T17:25:24.380 に答える