css content 속성이 ""로 설정되면 명확하게 나타 납니까?

Question

이것은 이상한 CSS 문제입니다. 누군가가 밝혀 내길 바라고있는 이상한 CSS 문제입니다 ...

나는 트위터 부트 스트랩을 사용하고 있으며 매우 이상한 플로트/삭제 동작을보고 있습니다. 나는 주요 내용에 오른쪽 플로팅 div와 양식 가로가 있습니다. 두 번째 양식 필드는 아무 이유없이 떠 다니는 div 아래에있는 것처럼 보입니다. 모든 HTML 요소와 CSS 선언을 살펴보면이 문제를 일으키는 이상한 속성입니다. 나는 그것을 하나의 CSS 선언으로 줄였습니다 :

.control-group::before, .form-horizontal .control-group::after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 

구체적으로 내용 : ""; 이 선언을 사용하지 않으면 첫 번째 필드가 떠 다니고 모두 잘됩니다. 소스 코드와 http://jsfiddle.net/whiteatom/UJ89p/1/embedded/result/

: http://jsfiddle.net/whiteatom/UJ89p/1/

이 설계인가를

나는 보여주기 위해 JS 바이올린을 만들었습니다? W3 사양? 일부 브라우저에만 해당됩니까 (MacOS에서는 Chrome, Safari, FF로 테스트)? 부트 스트랩 팀이이 빈 문자열 속성으로 수행하고자하는 것은 무엇입니까? 부트 스트랩 CSS 파일을 편집하지 않고 재정의 할 수 있습니까?

건배,

Answer 1

이 디자인인가?

예.

W3 사양?

Here it is. 빈 문자열은 여전히 ​​콘텐츠로 간주됩니다. 상자가 생성되지 않도록하려면 content: none을 사용해야합니다. 부트 스트랩 파일을 수정하지 않으면, 당신은 당신의 자신의 스타일 시트합니다 (content: "" 선언을 무시)에 다음 규칙을 추가 할 수 있어야한다 :

::after 의사 요소를 사용하고 있기 때문에 플로트 클리어되고 있음을

/* Single-colon pseudo-elements for consistency with Bootstrap's IE8 compat */ 
.form-horizontal .control-group:before, .form-horizontal .control-group:after { 
    content: none; 
} 

주 clearfix로. clear 선언 다른 부트 스트랩 스타일의 개별 규칙에 존재한다 :

.form-horizontal .control-group:after { 
    clear: both; 
} 

적절한 content: none 선언이되어 간극을 방지 전혀 렌더링되는 의사 소자 막을를 추가.

일부 브라우저에만 해당 되는가요? (MacOS에서는 Chrome, Safari 및 FF로 테스트)? 부트 스트랩 팀이이 빈 문자열 속성으로 수행하고자하는 것은 무엇입니까?

Some very old versions of Chrome, Safari, Firefox and Opera don't support content: nonecontent: "" (빈 문자열 포함)을 내용이없는 것으로 잘못 처리하십시오. content: none을 지원하는 버전은 IE8 이상 에서처럼 두 값을 올바르게 처리합니다.

빈 문자열을 사용하여 추측하고 있는데,이 오래된 브라우저를 고려하려고합니다.그렇다면

.form-horizontal .control-group:before, .form-horizontal .control-group:after { 
    display: table; 
    content: ""; 
    content: none; 
    line-height: 0; 
} 

을 - 그리고 그건 내 최고의 추측 - 다음 버그 리포트 순서대로 될 수있다 : 그런 경우, 다음과 같이 정확한 값을 사용합니다 content: none 그래서 최신 버전으로 오버라이드 (override)되어 있어야합니다.