Image 테이블 크기 오류 내에서 Safari 브라우저

div 내에 이미지 테이블을 생성합니다.Image 테이블 크기 오류 내에서 Safari 브라우저

이 사파리에 모질라와 크롬 완벽하게 잘 작동하지만 : 당신으로

Normal Output

이 출력이 새로 고침에 따라 즉, 사파리에 가끔 모습입니다 이미지가 td 세포의 크기에 놓이는 것을 볼 수 있습니다. 내가 페이지를 새로 고침 할 때

그러나 때로는이 생성되는 것입니다 : 내 코드에서

Wrong Output

내가 많은 이미지 내 게시물에 얼마나을 통해 루프를 않습니다. 당신은 사파리에서 페이지를 새로 고침하는 경우, 그것은 변화 것으로, 여기

<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 바이올린은주의하시기 바랍니다있다?! : 여기

코드입니다 기묘한!

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/

조언 : 당신의 HTML에 인라인 CSS를 사용하지 않습니다, 이것은 매우 나쁜 방법입니다. 사실, 치명적인 죄의 하나입니다.

출처

2013-03-15 15:34:42 dfsq

내에서 if 문과 함께 할 인용 부호를 제거, 정말 도움이, 그리고 네, 인라인 CSS를 수행하는 것을 중지 할 계획이다, 나는 나쁜 평판 + + – cwiggo

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

왜 다른 사건의 경우와 같이 id="blog-image- 이후에는 해시 값 (?)이 없다? (이 ID는 두 번 사용되기 때문에 코드가 유효하지 않게됩니다.)

style 속성 값 끝에 ""은 무엇이 있습니까?

출처

2013-03-15 15:30:06 CBroe

먼저 27 행과 32 행에서 닫는 따옴표가 두 배로 나타납니다. 둘째 - 첫 번째 두 이미지는 width="100%"이고 세 번째와 네 번째 이미지는 width="46px"이라고 선언하면 질문에 대한 적절한 대답이 될 것입니다.

출처

2013-03-15 15:31:14

감사합니다, 내 PHP – cwiggo

Image 테이블 크기 오류 내에서 Safari 브라우저

답변

관련 문제