IE에서 디스플레이가 좋지만 Safari에서 충돌이 발생합니다.

아래 코드는 IE 8에서는 잘 작동하지만 사파리 5에서는 작동하지 않습니다. IE에서 텍스트가 줄 바꿈되어 div의 레이아웃이 IE에 올바르게 배치되었습니다. 그러나 사파리에서는 모든 것이 엉망입니다. 난 그냥 추가 : 얘들 아 나 5IE에서 디스플레이가 좋지만 Safari에서 충돌이 발생합니다.

내가 사전 :

참고 사진을 같이 enter image description here

감사보고 사파리에 레이아웃을 원하는 사파리에이 작품을 만들기 위해 도와주세요 디스플레이를 더 좋게 만들기 위해 웹의 샘플 URL

<html> 
<body> 
<div style="overflow:auto;width:200px;clear:both;border:1px black solid;padding:4px;"> 
     <div class="clsContainer div1" style="border:1px solid black;margin-right:3px;float:left;"> 
      <img src="http://www.scicomcommerce.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/m/y/my-computer.jpg" 
     alt="" style="height:50px;width:50px;"/>   
     </div> 
     <div class="clsContainer div2" style="float:left;"> 
      <div id="first" style="border:1px solid black;margin-bottom:3px;word-wrap:break-word;padding:2px;"> 
       The quick brown fox jumps over the lazy dog. 
     </div> 
      <div id="second" style="border:1px solid black;margin-top:8px;word-wrap:break-word;padding:2px;"> 
       ThisIsAVeryLongggggWordThatDoesNotWrapPleaseHelpMeSolveThisWordWrapIssueInSafari 
     </div> 
     </div> 
</div> 
</body> 
</html>

출처

2011-03-07 Carls Jr.

왜, 오 왜 인라인 스타일을 사용하여 이동해야하므로

그러나 Safari는 아직 휴식 단어를 지원하지 않습니다? 여기에 : http://jsfiddle.net/Kyle_Sevenoaks/6vxkU/ – Kyle

@ 카일 : 실제로 실제 코드는 별도의 CSS 파일에 들어 있습니다 ...이 샘플 레이아웃에는 인라인 스타일을 사용합니다. 모든 것이 더미 인 것을 볼 수 있습니다. 대신 사파리에 대한 해킹을 제안한다고 생각합니다. :) –

아하, 그런 경우에 나는 실제 코드가 어떤 것인지 알려줄 것을 제안한다 : D 서포 (afaik)는 'break-word'를 지원하지 않으므로, JS 솔루션 또는 정말 긴 단어를 사용하지 마십시오 : D – Kyle

#first 
{ 
    width: 138px; 
    border:1px solid black; 
    margin-bottom:3px; 
    word-wrap:break-word; 
    padding:2px; 
} 

#second 
{ 
    border:1px solid black; 
    margin-top:8px; 
    width: 138px; 
    word-wrap:break-word; 
    padding:2px; 
}

Example for you here. Windows 용 Safari 5.0.3에서 테스트되었습니다. 당신이 지금 실제 단어를 사용 :

출처

2011-03-07 07:47:06 Kyle

safari에서 작동하지 않는 이유는 word-wrap : break-word이 아직 널리 지원되지 않기 때문입니다.

것이 더 영감이 게시물 읽기 : 당신은 당신의 #first 및 #second 된 div에 명시 적으로 폭을 추가 할 필요가 word wrap in css/js

출처

2011-03-07 07:43:17

니스 읽기 ... :) 감사합니다! –

IE에서 디스플레이가 좋지만 Safari에서 충돌이 발생합니다.

답변

관련 문제