HTML5/CSS/JavaScript 학습 곡선의 한가운데서 벽에 부딪쳤습니다.일관성없는 CSS 동작 : 'display'와 'float'- 조언이 필요합니다.
제 목표는 양식을 만드는 것입니다. 이 겉으로보기에는 간단한 작업을 실행하는 과정에서 나는 Firefox와 IE에서 완벽하게 표시되는 혼란스러운 괴물을 만들었지 만 Chrome과 Safari에서 뒤죽박죽 된 것처럼 보입니다. 내 문제를 설명하는 몇 가지 샘플 코드를 작성했습니다. 사용자 이름과 비밀번호에 대한 두 개의 텍스트 필드와 'Sanford and Son'의 테마가 사용자 세션 중에 재생되어야하는지 여부를 나타내는 확인란이있는이 세 줄의 형식을 고려하십시오.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
IE 또는 Firefox에서 보는 것이 좋습니다. 이제 Chrome 또는 Safari에서 보시기 바랍니다. 'sanford'확인란은 레이블 아래에 으로 표시됩니다. 안좋다. 체크 박스는 분명히 레이블 오른쪽에 표시되어야합니다. 더욱 복잡한 점은 확인란을 다른 입력 (예 : 텍스트, 라디오 등)으로 바꾸면 모든 브라우저에서 모든 것이 올바르게 표시된다는 것입니다. 이 문제는 확인란으로 제한된 것 같습니다.
여기에 무슨 일이 일어나고 있는지 머리를 감쌀 수 없습니다. 'Sanford'라벨이 왼쪽으로 이동하므로 체크 박스가 해당 라벨의 바로 오른쪽으로 이동해야합니다. 실제로 Firefox/IE에서는 정확히 발생합니다 ... Chrome/Safari에없는 이유는 무엇입니까?
도움을 주시면 감사하겠습니다. http://jsfiddle.net/ChadDecker/FyNZw/
는 [바이올린] 만들기 (http://jsfiddle.net), 더 이해가됩니다이 코드의를 – Ibu
나는 바이올린 계정을 만든 확인하고 여기에 코드를 게시했습니다. IE/Firefox에서는 제대로 표시되지만 Chrome/Safari에서는 제대로 표시되지 않습니다. http://jsfiddle.net/ChadDecker/FyNZw/ –