웹킷 디스플레이 : 인라인 블록 일관성없는 동작

Question

나는 그 안에 몇 개의 다른 범위가있는 범위가 있으며 하위 범위를 display:block과 display:inline 사이에서 토글하려고합니다. 범위는 display:inline-block으로 시작한 다음 display:block으로 전환됩니다. 이것은 잘 작동합니다. 문제는 Webkit에서 다시 전환 할 때입니다 (Firefox에서 제대로 작동 함). span은 두 줄 사이에 여분의 줄 바꿈으로 렌더링됩니다.

<br/> 태그를 스팬 사이에 넣지 않고 올바르게 렌더링 할 수 있습니까? 여기

데모 : http://jsbin.com/omalu3/4/edit

Answer 1

는 이제 재미 없어.

무엇이 문제의 원인인지는 확실치 않지만 float: left;을 #a.oneline *에 추가하면 사라집니다. 당신이 작업을 수행 할 때, 당신은 그래서 당신의 스타일은 다음과 같이 차단하는 표시를 변경할 수 :

#a.multiline * { } 
#a.oneline * { float:left; } 
#a * { border:solid 1px black; display:block;} 

이 솔루션과 원래의 레이아웃 사이의 유일한 차이는 oneline 블록 대신 상단에 정렬된다는 것입니다 바닥,하지만 당신은 그 요소에 대한 고정 높이를 설정할 수 있습니다.

Answer 2

다른 해결책은 브라우저 버그이므로 해결 방법이 될 수 있습니다. 대안 derekerdmann 수의 솔루션 : - 인라인 요소

#a.multiline * { width: 100% } 
    #a.oneline * { width: auto } 
    #a * { border:solid 1px black; display:inline-block } 

Answer 3

또 다른 해결 방법은 아이들을 포장하지 않는 것이 다른 범위에 걸쳐있다. #a에 <div>을 사용하면 올바르게 작동합니다 (Webkit에서는 적어도!).

별표로 별표 선택기가 실제로 효율적이지는 않습니다. 단지 예일 뿐이므로 여기서 비판하지 않을 것입니다. D