圖片在表格大小錯誤，Safari瀏覽器

我生成一個div圖片的圖表。圖片在表格大小錯誤，Safari瀏覽器

這工作完全正常在Mozilla和Chrome，但不是在野生動物園：

這是輸出有時看起來像在Safari，即取決於刷新：

Normal Output

正如你可以看到圖像被放置到td單元的大小。

但有時，當我刷新頁面，這會產生什麼：

Wrong Output

在我的代碼做一個for循環在許多圖像是如何在我的崗位。

下面是代碼：

<table style="margin-top:2px; width:100%;"> 
    <tr> 
     <td colspan="4" style="text-align:center; padding: 2px 2px 2px 2px;"> 
      <div class="blog-image" id="blog-image-419d6830569939e69a4e827a437af00b711b85cc" style="border-style:solid; border-width:1px; border-color:#8AAEA4;" data-keywords=""> 
       <a data-target="flare" href="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" data-flare-scale="fit"> 
        <img style="display: block;" width="100%" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="butterbean stew.jpg"/> 
       </a> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding: 2px 2px 2px 2px;"> 
      <div class="blog-image" id="blog-image-99c01d06fa65c7879df3f1db0520c98678af7577" style="border-style:solid; border-width:1px; border-color:#8AAEA4;" data-keywords=""> 
      <a data-target="flare" href="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" data-flare-scale="fit"> 
       <img style="display: block;" width="100%" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="welsh rarebit.jpg"/> 
      </a> 
      </div> 
     </td> 

     <td style="padding: 2px 2px 2px 2px;"> 
      <div class="blog-image" id="blog-image-c77d52058e55fc9dfa0520b9f786d8f5ff718074" style="border-style:solid; border-width:1px; border-color:#8AAEA4;" data-keywords=""> 
       <a data-target="flare" href="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" data-flare-scale="fit"> 
        <img style="display: block;" width="100%" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="blackboard.jpg"/></a> 
      </div> 
     </td> 
     <td style="padding: 2px 2px 2px 2px;"> 
      <div class="blog-image" id="blog-image-" style="border-style:solid; border-width:1px; border-color:#8AAEA4;""> 
        <img style="display: block;" width="46px" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="" /> 
      </div> 
     </td> 
     <td style="padding: 2px 2px 2px 2px;"> 
      <div class="blog-image" id="blog-image-" style="border-style:solid; border-width:1px; border-color:#8AAEA4;""> 
       <img style="display: block;" width="46px" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="" /> 
      </div> 
     </td> 
    </tr> 
</table>

這裏是有關JS小提琴，請注意，如果您刷新頁面在Safari中，它的變化？奇怪的！

JS FIDDLE HERE

誰能告訴我，爲什麼圖像這樣做呢？解決這個問題的方法是停止頁面上顯示的圖像。

來源

2013-03-15 cwiggo

你的HTML中有一團糟。主要問題是你沒有設置表格單元格的寬度。有一點固定的版本使用一塊CSS的：

.thumbs td { 
    padding: 2px; 
    width: 25%; // <-- force td to be equal size 
} 
.thumbs td img { 
    width: 100%; 
}

http://jsfiddle.net/naJ46/2/

忠告：千萬不要用內嵌CSS在你的HTML，這是非常不好的做法。事實上，這是一個致命的罪過。

來源

2013-03-15 15:34:42 dfsq

中的if語句非常感謝，確實有幫助，是的，我打算停止執行內聯css，我對它不利：D聲譽++ – cwiggo 2013-03-15 15:46:33

<div class="blog-image" id="blog-image-" 
    style="border-style:solid; border-width:1px; border-color:#8AAEA4;"">

爲什麼沒有散列值（？）id="blog-image-後作爲與其他事件的情況下？（這會使您的代碼無效，因爲該ID使用了兩次。）

屬性值的末尾有什麼""？

來源

2013-03-15 15:30:06 CBroe

首先，在第27行和第32行，你已經加倍了引號。其次 - 您爲前兩張圖片聲明width="100%"，爲第三張和第四張圖片聲明width="46px"，我想這就是您的問題的正確答案。

來源

2013-03-15 15:31:14

謝謝，我刪除了引號，它與我的php – cwiggo 2013-03-15 15:46:57

圖片在表格大小錯誤，Safari瀏覽器

回答

相關問題