2011-06-11 2 views
0

IE7은 CSS 너비를 지원하지 않으므로 : 자동; 너비 : 100 %; 또는 너비 : 상속; on span 태그 나는 jQuery로이 너비를 가져오고 설정해야한다. "=개별 너비 요소를 가져오고 설정하십시오.

그래서 내가 어떻게"텍스트 "

나는 아래의 코드를 시도 = 가장 가까운 스팬 클래스와 같은 폭 스팬 클래스 ="center_bg "를 설정할 수 있지만, 모든 스팬 클래스에서 동일한 폭을 시만 center_bg "요소를 반복합니다.

jQuery('.ul li span.menu_text').each(function(i) { 
    var spanWidth = jQuery(this).width(); 
    jQuery("span.center_bg").width(spanWidth); 
}) 

<ul> 
    <li> 
    <a> 
     <span class="left_bg"></span> 
     <span class="right_bg"></span> 
     <span class="center_bg"></span> 
     <span class="text"></span> 
    <a/> 
</li> 
<li> 
    <a> 
    <span class="left_bg"></span> 
    <span class="right_bg"></span> 
    <span class="center_bg"></span> 
    <span class="text"></span> 
    <a/> 
</li> 
</ul 
+2

은'span's에 대한 CSS 무엇입니까? 브라우저는 인라인 요소에 대해'width' 설정을 지원하지 않아야합니다. 그것은 IE7의 특정 문제가 아니지만 의도적으로 설계되었습니다. 블록 또는 인라인 블록 요소를 사용해야합니다. –

+0

스팬에 표시 블록을 사용하고 남겨 두십시오. 또는 div에 맞게 변경하십시오. +1 Pekka의 의견. -1 당신의 접근. – addedlovely

+0

어떻게 보이게 할 것인지에 대한 이미지가 있습니까? 귀하의 접근 방식은 여기에서 더 큰 문제입니다. – wdm

답변

1
  1. span 요소는 기본 display:inline 요소입니다.
  2. display:inline 요소 정의에 더 전용 상자가 없습니다 - 그것은 오히려 여러에 라인을 포장 할 수 개별 그리 상자의 모음입니다. 따라서 폭과 높이는 인라인에서는 정의되지 않습니다.

에 한번이 문제를 정의하고 그것을 작동합니다 :

.ul li span { display:inline-block; } 
+0

IE7이 display를 지원하지 않는다고 생각합니다 : inline-block; – wdm

관련 문제