堆棧內存溢出
  簡體   English   中英

在Internet Explorer / Firefox中無法正確縮放圖像，但在Chrome中可以正常使用

[英]Images not scaled correctly in Internet Explorer/Firefox, works in Chrome

 原文  2013-12-06 10:33:50  3   1    html/ css/ wordpress

問題描述

問題

我正在WordPress網站上工作，在該網站上Internet Explorer / Firefox呈現頁面的方式與Chrome不同。 我正在嘗試讓Internet Explorer / Firefox像Chrome一樣呈現頁面。

Chrome渲染： 在此處輸入圖片說明

Internet Explorer（和類似的Firefox渲染）： 在此處輸入圖片說明

到目前為止我嘗試過的

  1. 如果刪除圖像周圍的框架，則渲染正確。 因此，我懷疑問題出在框架CSS類中。

問題

  • IE / Firefox是否存在任何可能導致此問題的已知問題？
  • 關於要查看CSS哪一部分的任何提示？

資源

HTML中添加圖片的部分： 

<div class="main-holder">
<div id="content" class="content_full_width">
<div class="one_half"><p>Content goes here&#8230;<br />
<span class="su-frame su-frame-align-left su-frame-style-default"><span class="su-frame-inner"><img alt="" src="112-12521-551x220.jpg" /></span></span></p>
</div><div class="one_half_last"><p>Content goes here&#8230;<br />
<span class="su-frame su-frame-align-left su-frame-style-default"><span class="su-frame-inner"><img alt="" src="112-12521-551x220.jpg" /></span></span></p>
</div><br class="clear" />

相關框架CSS類： 

/*      Frame
---------------------------------------------------------------*/

.su-frame,
.su-frame-inner { display: block; }
.su-frame-align-left {
    float: left;
    margin: 0 1em 1em 0;
}
.su-frame-align-center {
    float: none;
    margin: 1em auto;
}
.su-frame-align-right {
    float: right;
    margin: 0 0 1em 1em;
}
.su-frame img {
    display: block !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.su-frame-style-default {
    padding: 2px;
    border: 1px solid #999;
    background: #fff;
    -webkit-box-shadow: 1px 1px 4px #ccc;
    -moz-box-shadow: 1px 1px 4px #ccc;
    box-shadow: 1px 1px 4px #ccc;
}
.su-frame-style-default .su-frame-inner {
    padding: 2px;
    border: 4px solid #eee;
}

相關列CSS類： 

/*----------------------------*/
/* 5. Multi Columns
/*----------------------------*/
.clear {clear: both;}
.one_half, .one_half_last, .one_third, .one_third_last, .one_fourth, .one_fourth_last, .one_fifth, .one_fifth_last, .one_sixth, .one_sixth_last, .two_thirds, .two_thirds_last {padding-bottom: 20px;}


#content .one_half {float:left;width:342px;margin-right:30px;}
#content .one_half_last {float:right;width:342px;margin:0;}
#content .one_third {float:left;width:220px;margin-right:30px;}
#content .one_third_last {float:right;width:220px;margin:0;}
#content .one_fourth {float:left;width:152px;margin-right:36px;}
#content .one_fourth_last {float:right;width:152px;margin:0;}
#content .one_fifth {float:left;width:124px;margin-right:23px;}
#content .one_fifth_last {float:right;width:124px;margin:0;}
#content .one_sixth {float:left;width:100px;margin-right:20px;}
#content .one_sixth_last {float:right;width:100px;margin:0;}
#content .two_thirds {float:left;width:470px;margin:0;}
#content .two_thirds_last {float:right;width:470px;margin:0;}
#content .three_fourth {float:left;width:550px;margin:0;}
#content .three_fourth_last {float:right;width:530px;margin:0;}


.content_full_width .one_half {float:left;width:455px !important;margin-right:30px !important;}
.content_full_width .one_half_last {float:right;width:455px !important;margin:0 !important;}
.content_full_width .one_third {float:left;width:293px !important;margin-right:30px !important;}
.content_full_width .one_third_last {float:right;width:293px !important;margin:0 !important;}
.content_full_width .one_fourth {float:left;width:208px !important;margin-right:36px !important;}
.content_full_width .one_fourth_last {float:right;width:208px !important;margin:0 !important;}
.content_full_width .one_fifth {float:left;width:168px !important;margin-right:23px !important;}
.content_full_width .one_fifth_last {float:right;width:168px !important;margin:0 !important;}
.content_full_width .one_sixth {float:left;width:140px !important;margin-right:20px !important;}
.content_full_width .one_sixth_last {float:right;width:140px !important;margin:0 !important;}
.content_full_width .two_thirds {float:left;width:595px !important;margin:0 !important;}
.content_full_width .two_thirds_last {float:right;width:595px !important;margin:0 !important;}
.content_full_width .three_fourth {float:left;width:690px !important;margin:0 !important;}
.content_full_width .three_fourth_last {float:right;width:685px !important;margin:0 !important;}

.content_full_width .two_thirds_last .one_third, .content_full_width .two_thirds_last .one_third_last, .content_full_width .two_thirds .one_third, .content_full_width .two_thirds .one_third_last {width:280px !important;}


.content_sidebar .one_fourth, .content_sidebar .one_fourth_last {width:105px !important;}
.content_sidebar .one_third, .content_sidebar .one_third_last {width:145px !important;}
.content_sidebar .one_half, .content_sidebar .one_half_last {width:235px !important;}
.content_sidebar .two_thirds, .content_sidebar .two_thirds_last {width:325px !important;}

#footer .one_half {float:left;width:455px !important;margin-right:30px !important;}
#footer .one_half_last {float:right;width:455px !important;margin:0 !important;}
#footer .one_third {float:left;width:305px !important;margin-right:30px !important;}
#footer .one_third_last {float:right;width:305px !important;margin:0 !important;}
#footer .one_fourth, #footer .one_fourth_last {float:left !important;width:227px !important;margin-right:23px !important;}
#footer .one_fourth_last {margin-right:0px !important;float:right !important;}
#footer .one_fifth {float:left;width:177px !important;margin-right:23px !important;}
#footer .one_fifth_last {float:right;width:177px !important;margin:0 !important;}
#footer .one_sixth {float:left;width:146px !important;margin-right:20px !important;}
#footer .one_sixth_last {float:right;width:146px !important;margin:0 !important;}


#content .tabs-area .one_half,
#content .slide .one_half {float:left;width:310px;margin-right:30px;}
#content .tabs-area .one_half_last,
#content .slide .one_half_last {float:right;width:310px;margin:0;}
#content .tabs-area .one_third,
#content .slide .one_third {float:left;width:194px;margin-right:35px;}
#content .tabs-area .one_third_last,
#content .slide .one_third_last {float:right;width:194px;margin:0;}
#content .tabs-area .one_fourth,
#content .slide .one_fourth {float:left;width:141px;margin-right:30px;}
#content .tabs-area .one_fourth_last,
#content .slide .one_fourth_last {float:right;width:141px;margin:0;}
#content .tabs-area .one_fifth,
#content .slide .one_fifth {float:left;width:108px;margin-right:28px;}
#content .tabs-area .one_fifth_last,
#content .slide .one_fifth_last {float:right;width:108px;margin:0;}
#content .tabs-area .one_sixth,
#content .slide .one_sixth {float:left;width:92px;margin-right:20px;}
#content .tabs-area .one_sixth_last,
#content .slide .one_sixth_last {float:right;width:92px;margin:0;}
#content .tabs-area .two_thirds,
#content .slide .two_thirds {float:left;width:425px;margin:0;}
#content .tabs-area .two_thirds_last,
#content .slide .two_thirds_last {float:right;width:425px;margin:0;}
#content .tabs-area .three_fourth,
#content .slide .three_fourth {float:left;width:485px;margin:0;}
#content .tabs-area .three_fourth_last,
#content .slide .three_fourth_last {float:right;width:485px;margin:0;}


.content_full_width .tabs-area .one_half,
.content_full_width .slide .one_half {float:left;width:420px !important;margin-right:30px !important;}
.content_full_width .tabs-area .one_half_last,
.content_full_width .slide .one_half_last {float:right;width:420px !important;margin:0 !important;}
.content_full_width .tabs-area .one_third,
.content_full_width .slide .one_third {float:left;width:267px !important;margin-right:30px !important;}
.content_full_width .tabs-area .one_third_last,
.content_full_width .slide .one_third_last {float:right;width:267px !important;margin:0 !important;}
.content_full_width .tabs-area .one_fourth,
.content_full_width .slide .one_fourth {float:left;width:190px !important;margin-right:36px !important;}
.content_full_width .tabs-area .one_fourth_last,
.content_full_width .slide .one_fourth_last {float:right;width:190px !important;margin:0 !important;}
.content_full_width .tabs-area .one_fifth,
.content_full_width .slide .one_fifth {float:left;width:155px !important;margin-right:23px !important;}
.content_full_width .tabs-area .one_fifth_last,
.content_full_width .slide .one_fifth_last {float:right;width:155px !important;margin:0 !important;}
.content_full_width .tabs-area .one_sixth,
.content_full_width .slide .one_sixth {float:left;width:127px !important;margin-right:20px !important;}
.content_full_width .tabs-area .one_sixth_last,
.content_full_width .slide .one_sixth_last {float:right;width:127px !important;margin:0 !important;}
.content_full_width .tabs-area .two_thirds,
.content_full_width .slide .two_thirds {float:left;width:575px !important;margin:0 !important;}
.content_full_width .tabs-area .two_thirds_last,
.content_full_width .slide .two_thirds_last {float:right;width:575px !important;margin:0 !important;}
.content_full_width .tabs-area .three_fourth,
.content_full_width .slide .three_fourth {float:left;width:650px !important;margin:0 !important;}
.content_full_width .tabs-area .three_fourth_last,
.content_full_width .slide .three_fourth_last {float:right;width:650px !important;margin:0 !important;}


.content_sidebar .tabs-area .one_half,
.content_sidebar .slide .one_half {float:left;width:205px !important;}
.content_sidebar .tabs-area .one_half_last,
.content_sidebar .slide .one_half_last {float:right;width:205px !important;}
.content_sidebar .tabs-area .one_third,
.content_sidebar .slide .one_third {float:left;width:125px !important;}
.content_sidebar .tabs-area .one_third_last,
.content_sidebar .slide .one_third_last {float:right;width:125px !important;}
.content_sidebar .tabs-area .one_fourth,
.content_sidebar .slide .one_fourth {float:left;width:88px !important;margin-right:28px !important;}
.content_sidebar .tabs-area .one_fourth_last,
.content_sidebar .slide .one_fourth_last {float:right;width:88px !important;}
.content_sidebar .tabs-area .one_fifth,
.content_sidebar .slide .one_fifth {float:left;width:66px !important;}
.content_sidebar .tabs-area .one_fifth_last,
.content_sidebar .slide .one_fifth_last {float:right;width:66px !important;}
.content_sidebar .tabs-area .one_sixth,
.content_sidebar .slide .one_sixth {float:left;width:56px !important;}
.content_sidebar .tabs-area .one_sixth_last,
.content_sidebar .slide .one_sixth_last {float:right;width:56px !important;}
.content_sidebar .tabs-area .two_thirds,
.content_sidebar .slide .two_thirds {float:left;width:280px !important;}
.content_sidebar .tabs-area .two_thirds_last,
.content_sidebar .slide .two_thirds_last {float:right;width:280px !important;}
.content_sidebar .tabs-area .three_fourth,
.content_sidebar .slide .three_fourth {float:left;width:320px !important;}
.content_sidebar .tabs-area .three_fourth_last,
.content_sidebar .slide .three_fourth_last {float:right;width:320px !important;}

1 個解決方案

解決方案1
 0  2013-12-06 10:39:53

將以下規則添加到“ .su-frame img”：

max-width:100%;
height:auto;

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS適用於Internet Explorer，但不適用於Chrome或Firefox 在Chrome中工作，但在Internet Explorer中不工作 切換代碼在Internet Explorer，Safari中不起作用，但在Chrome和Firefox中有效 Javascript打印彈出窗口適用於Firefox / Chrome但不適用於Internet Explorer XSLT適用於Opera，Safari和Chrome，但不適用於Firefox 13和Internet Explorer 9 我的 CSS 沒有在 Internet Explorer 11 和 Firefox 中加載！ 僅適用於 Chrome CSS動畫只能在Chrome和Safari中使用，而不能在Firefox和Internet Explorer中使用 提交按鈕不適用於Chrome或Firefox，但適用於Internet Explorer 該腳本代碼在Firefox和Internet Explorer中可以正常運行，但在谷歌瀏覽器中則無法運行 CSS在Chrome，Firefox和Safari中工作正常，但在Internet Explorer中失敗
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM