Chrome의 jQuery가 "인라인"대신 "블록"을 반환합니다.

인라인 인 두 개의 div가 있습니다. 둘 다 비슷한 스타일을 가지고 있으며 둘 다 인라인입니다.Chrome의 jQuery가 "인라인"대신 "블록"을 반환합니다.

JQuery는 CSS의 "디스플레이"가 Chrome에서만 블록임을보고합니다. 나는이 두 종류가 인라인다는 것을 진짜로 알 필요가있다.

jsfiddle here

CSS :

div 
{ 
    display: inline; 
    width: 50%; 
    float: left; 
    height: 100px; 
    text-align: center; 
    font-weight: bold; 
    padding: 10px; 
    box-sizing: border-box; 
} 
.div1 
{ 
    background-color: black; 
    color: white; 
    border: 2px solid grey; 
} 

.div2 
{ 
    background-color: white; 
    color: black; 
    border: 2px solid black; 
}

HTML :

<div class="div1">1</div> 
<div class="div2">2</div>

jQuery를 :

jQuery("div").click(function() 
{ 
    jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>"); 
}); 

jQuery("div").click();

사람이 더 중요한 것은 무슨 일이 일어나고 있는지 알거나합니까 무엇 할 수 있을까요? (의 시작을 내 머리를 ... 당겨 이외의 상처를합니다;))

출처

2011-05-02 James Khoury

'float : left'가'display : block'을 강제한다는 것을 알고 있습니까? 'display : inline'은 아무 것도하지 않습니다. 나를 믿지 않으면 제거하십시오. – thirtydot

Doh! 대답에 넣으면 정확하다고 표시 할 것입니다. 또한이 정보를 어디에서 찾을 수 있습니까? w3c? –

예, [W3C] (http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo). (편집 : 죄송합니다. 정확히 같은 링크가 포함 된 아래에 게시 된 답변을 보려면 업데이트하지 않았습니다. – jensgram

내 의견, float: left 힘 display: block에서 말했듯이.

여기서 스펙에 관련된 정보이다 :

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

요소는 가 왼쪽으로 부유하는블록 박스를 생성한다.

그리고 그렇지 않으면

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

'플로트'없음 '이 아닌 다른 값 있는 경우, 상기 상자에 따라 설정된다 와'디스플레이 '부유 아래 테이블 .

상기 표를 요약하면 : float = display: block.

출처

2011-05-02 07:27:10 thirtydot

감사합니다. 피들 업데이트 http://jsfiddle.net/MKRac/1/ 다른 사람이 같은 문제 / –

Chrome의 jQuery가 "인라인"대신 "블록"을 반환합니다.

답변

관련 문제