0
다음은 제가 작업하고있는 전체 테스트 페이지입니다 (여전히보기 흉한 곳). 내 문제는 ul class = "dropdown"입니다. SELECT 스타일을 대체 할 수 있도록 의도하고 있습니다. 다시 스타일을 지정할 수 있습니다. 그러나 나는 그것을 원하는 곳에 배치 할 수 없다. FF3.5에서이 페이지를 보면, 그것이 어떻게 배치되고 싶은지입니다. 그러나 IE7에서는 레이블을 뒤집지 않고 UL을 다음 줄로 밀고 있습니다. 나는 온라인에서 찾은 수많은 해킹을 시도했지만 아무도 도움이되지 않는다. 내가 여기서 무엇을 놓치고 있니?인라인 UL 요소가 IE7에서 작동하지 않습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Radix Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:1em;
font-family:arial,sans-serif;
}
.user-form li
{
background: #fff none no-repeat bottom right;
border: 1px solid #000;
margin: 0;
padding-right: 35px;
text-align: right;
}
.user-form li label
{
background: #fff;
border: 1px solid #333;
display: -moz-inline-stack; /* Support below FF3 */
display: inline-block; /* Used only to set width */
padding: 1px 0;
width: 10em;
}
.dropdown
{
border: 1px solid #f00;
width: 20em;
padding: 0;
margin: 0;
display:inline-block;
}
.dropdown ,
.dropdown ul
{
list-style-type:none;
}
.dropdown li
{
text-align: left;
}
</style>
</head>
<body>
<form id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" class="edit-on" action="/service/testclass.php">
<fieldset>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:id" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" type="hidden"/>
<ul class="user-form">
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">Prefix:</label>
<input value="Ms." id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix" name="name_prefix" type="hidden"/>
<ul class="dropdown">
<li>
<a href="#" class="trigger">Miss</a>
</li>
<li class="dropcontainer">
<ul class="dropdownhidden">
<li>
<a href="#"> </a>
</li>
<li>
<a href="#">Mister</a>
</li>
<li>
<a href="#">Misses</a>
</li>
<li>
<a href="#">Miss</a>
</li>
<li>
<a href="#">Doctor</a>
</li>
<li>
<a href="#">This is just a little test to see exactly how long this silly thing will make my option</a>
</li>
</ul>
</li>
</ul>
<input name="name_prefix_value" value="Mr." type="hidden"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name">Customer Last Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name" name="last_name" value="Jones" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name">My First Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name" name="first_name" value="George" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name">Middle Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name" name="middle_name" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix">Suffix:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix" name="name_suffix">
<option value="0"/>
<option value="Jr.">Junior</option>
<option value="Sr.">Senior</option>
</select>
<input name="name_suffix_value" type="hidden"/>
</li>
<li class="invalid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date">Date of Birth:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date" name="birth_date" type="text"/>
</li>
<li class="warning">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender">Gender:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender" name="gender">
<option value="0"/>
<option value="U">Unknown</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
<input name="gender_value" type="hidden"/>
</li>
</ul>
<div class="form-actionbar">
<input name="form-edit" value="Edit" class="button-view" type="submit" disabled="disabled"/>
<input name="form-draft" value="Draft" class="button-edit" type="submit"/>
<input name="form-submit" value="Submit" class="button-edit" type="submit"/>
<input name="form-cancel" value="CancelMe" class="button-edit" type="submit"/>
<input name="form-suspend" value="Suspend" class="button" type="submit"/>
</div>
</fieldset>
</form>
</body>
</html>
예, 숨겨진 입력을 이동하고 제거했지만 아무 것도 변경되지 않았습니다. – heath