html - 为什么 Internet Explorer 手机会放大元素？

Question

我正在努力响应一个网站，例如在 chrome 上，一切都按预期工作。我使用设备模式来模拟网站的响应版本。然而，当我使用 Internet Explorer 时，一切都变得更大，而且图片看起来像素化，就像拉伸(stretch)它们时一样。

我尝试使用双三次 css 属性，但没有成功。缩放选项也为 100%(听说其他一些人已将他们的缩放选项放大)。

这就是罪魁祸首的代码的样子

HTML

<div id="category-contents">
    <div class="cell-wrapper">
        <div class="cell-wrapper-inside">
            <a href="http://www.theperfecturn.com/small-cross-cremation-jewelry-c-481.html" class="image product-thumb-image" style="background: url('images/categories/sm/481.smallcrosscremat_sm.jpg') 2px 2px no-repeat;"><img src="http://cdn.perfectmemorials.com/categories_layout/photo-frame.png" alt="Small Cross Cremation Jewelry" title=" Small Cross Cremation Jewelry " width="124" height="124"> </a>

            <a href="http://www.theperfecturn.com/small-cross-cremation-jewelry-c-481.html" class="title">Small Cross Cremation Jewelry</a>

            <div class="button-wrapper"><a href="http://www.theperfecturn.com/small-cross-cremation-jewelry-c-481.html"><img src="http://cdn.perfectmemorials.com/categories_layout/button-category.gif" class="category" alt="View Small Cross Cremation Jewelry Category"></a></div>
        </div>
    </div>
</div>

CSS

#category-contents{
    overflow: hidden;
}    

#category-contents .cell-wrapper,
#results-products .cell-wrapper{
    box-sizing: border-box;

    width: 50%;
    height: auto;
}

#category-contents .cell-wrapper .title{    
    height: 65px;
}

#results-products .cell-wrapper .title{

}

#category-contents .cell-wrapper .cell-wrapper-inside,
#results-products .cell-wrapper .cell-wrapper-inside{
    height: auto;
    width: auto;
}

#category-contents .cell-wrapper .button-wrapper,
#results-products .cell-wrapper .button-wrapper{
    position: static;
    width: auto;
}

.cell-wrapper .button-wrapper .product{
    float: none !important;

}

.cell-wrapper .button-wrapper .volume{
    float: none !important;
    margin-bottom: -5px;
}

http://puu.sh/hKEHh/3ceb0a9168.jpg <- 它在 chrome 上的外观 http://puu.sh/hKEP6/3f8f2aad40.jpg <- 它在 ie 上的样子

Answer 1

我的建议是将正文的填充和边距归零

所以添加到你的CSS

body {
padding: 0;
margin: 0;
}

如果不访问实际文件，很难确切地看到发生了什么