부트 스트랩 렌더링 불일치

Question

부트 스트랩을 사용할 때 Chrome (정확함)과 Firefox (올바르지 않음) 사이의 렌더링 불일치가 있습니다.

<div class='container'> 
    <form class='form-horizontal well span6 offset3'> 
     <label class='control-label'>Testy</label> 
     <div class='controls'> 
      <select></select> 
     </div> 
    </form> 
    <legend>Hello!</legend> 
</div> 

불일치의 원인은 무엇입니까 :이 내 코드 (바이올린 here)인가? Firefox 렌더링을 수정하여 Chrome과 일치하도록하려면 어떻게해야합니까?

Answer 1

파이어 폭스와 크롬은 fieldset 태그를 렌더링하는 방식이 될 것으로 보인다

, 적어도 당신이 참조하고있는 부트 스트랩의 응답하지 않는 버전. 변수를 제거하기 위해 Bootstrap에 대한 참조를 제거하고 bootstrapcdn.com's version에 연결하여 문제를 해결하는 것으로 보입니다.

다른 경우라면 fieldset 태그에 CSS를 추가하여 모든 최신 브라우저에서 동일한 CSS를 렌더링 할 수 있습니다.

fieldset {clear : both; }

업데이트 : 내가 관심을 지불하지 않는 것처럼, 차라리 fieldset보다는 legend 태그에 CSS를 반영하기 위해이 답변을 업데이 트했습니다 보인다. JSFiddle Here.

legend { clear: both; }

Answer 2

범례 태그는 양식 태그 내에 있어야하며 주위에 필드 세트 태그가 있어야합니다.

부트 스트랩에서이 예를 참조하십시오

<form> 
<fieldset> 
<legend>Legend</legend> 
<label>Label name</label> 
<input type="text" placeholder="Type something…"> 
<span class="help-block">Example block-level help text here.</span> 
<label class="checkbox"> 
<input type="checkbox"> Check me out 
</label> 
<button type="submit" class="btn">Submit</button> 
</fieldset> 
</form> 

그리고

은 당신의 코드는 다음과 같습니다

<div class='container'> 
<form class='form-horizontal well span6 offset3'> 
    <fieldset> 
    <label class='control-label'>Testy</label> 
    <div class='controls'> 
    <select></select> 
    </div> 
    <legend>Hello!</legend> 
    </fieldset> 
</form> 
</div>