2009-10-12 5 views
1

HTML 콘텐츠에 SPAN 요소가있을 때마다 Safari의 모바일 버전이 콘텐츠를 다르게 렌더링합니다. 전체 단락의 글꼴 크기가 늘어난 것처럼 보입니다. 두 가지 예를 생각해보십시오.Safari (iPhone)의 이상한 SPAN 요소 렌더링

<div style="border: 1px solid red; width:500px;"> 
<p>This is a paragraph. This is a paragraph. This is a paragraph.</p> 
</div> 

<div style="border: 1px solid red; width:500px;"> 
<p>This is a <span>paragraph</span>. This is a paragraph. This is a paragraph.</p> 
</div> 

번째 예에서는 폰트 크기가 증가하기 때문에 페이지 구조를 분해하고, 이에 따라 콘텐츠 DIV의 폭을 초과한다. SPAN을 사용하지 않는 것 외에 다른 방법이 있습니까? 스팬 단락 태그와 일치하고이 문제를 해결할 수 있는지 확인하기 위해

아이폰 OS 3.1.2

답변

1

두 HTML 조각의 표시는 iPhone Safari (iPhone OS 3.1.2)에서도 동일합니다.

SPAN 태그에 적용되는 CSS가 있습니까?

[편집 : 이제 차이점을 알 수 있습니다. 두 예제가 같은 페이지에 있으면 차이가 보이지 않습니다.]

[Added :] 명시 적으로 크기를 설정하면이 둘 사이에 일관된 텍스트 크기가 나타날 수 있습니다. 예를 들면 :

<style type="text/css"> 
    div, p, span { 
    font-size: 24px; 
    } 
</style> 
+0

아니요, CSS가 전혀 없습니다. 이 두 링크를보십시오 : http://www.eparks.lv/stackoverflow/span.html http://www.eparks.lv/stackoverflow/nospan.html –

+0

나는 그의 문제를 분명히 봅니다. 스팬을 사용하면 전체 단락의 글꼴이 크게 보입니다. – idrumgood

+0

두 링크가 다르게 표시됩니다. 나는 두 가지 예가 모두 들어있는 페이지를 만들었지 만 그들은 동일하게 보였다. – jhurshman

0

폴, 당신은 명시 적으로 글꼴 크기를 설정 하시겠습니까?

+1

,이 두 링크를 시도하십시오 : http://www.eparks.lv/stackoverflow/span.html http://www.eparks.lv/stackoverflow/nospan.html –

+0

그것은 문제를 해결 않지만 I 그것은 렌더링의 버그라고 생각합니다. –

5

시도 스팬 글꼴 크기는 전혀 다른 보이게 중지해야 CSS와 아이폰 사파리에 -webkit-text-size-adjust: none;를 추가.

+0

해결할 정답입니다. 나는 그것을 '신체'에 적용하고 굉장히 효과적이다. –

+0

감사합니다. – John

관련 문제