作業中のページがあり、フィールド要素とドロップダウンがいくつかあります。次のようになります。
私は今それをテーブルに設定しています、コードは次のようになります：
<!DOCTYPE html>
<html>
<head>
<title>Corporate Directory</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.min.js"></script>
<link type="text/css" href="Styles/base.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/Autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit",function(){
path = "path";
$.ajax({url:path+"Mobile_PhoneStart.cfm",
dataType:'json',
success:(function(data){
//stuff to do autofill
populatebusunit();
}),
error:(function(){alert("Session Expired. Restart the Brower/App.");})});
});
function populatebusunit(){
// fills the dropdown for business unit
for(var i=1;i<sdata.DATA.length;i++){
var listvalue = $.trim(sdata.DATA[i][2])+" - *" + $.trim(sdata.DATA[i][0]) +"*";
var markup = markup + '<option value="'+$.trim(sdata.DATA[i][0])+'">'+listvalue+'</option>';
}
$("#busunit").append(markup).trigger("create");
}
function loadjscssfile(filename, filetype){
//load a css file dynamically
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var msg = "You're not using Internet Explorer.";
var ver = getInternetExplorerVersion();
if ( ver > -1 )
{
if ( ver >= 8.0 )
msg = "You're using a recent copy of Internet Explorer."
else
msg = "You should upgrade your copy of Internet Explorer.";
}
alert( msg );
}
</script>
<link rel="stylesheet" href="Styles/autocomplete.css" />
<script src="Scripts/jquery.mobile-1.0.js"></script>
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="Styles/Main.css" />
<script type="text/javascript">
var IE = getInternetExplorerVersion();
loadjscssfile("Styles/customtheme.css", "css");
</script>
</head>
<body>
<!-- -------- Corporate Directory Lookup -->
<div data-role="page" id = "Mainpage" data-title = "Corporate Directory">
<div><img src="images/corporatedirectory2.jpg" alt="test"></img><a data-role="button" id="link" data-inline="true" href="Lookup.html" data-icon="search" data-theme="a" rel="external" data-ajax="false" data-mini="true">Basic Search</a></div>
<div></div> <br><br><br>
<div data-role="content">
<div><form action="SearchResults.html" method="get" rel="external" data-ajax="false">
<input type="Hidden" name="StartRow" value=1>
<input type="Hidden" name="SearchFlag" value="no">
<input type="Hidden" name="SearchTable" value="A">
<input type="Hidden" name="MName" value="">
<br>
<table border="0">
<col width="auto" />
<col width="100%" />
<tr>
<td nowrap><label for="lastname">Last Name:</label></td>
<td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" name="LName" id="lastname" value="" placeholder="Lastname"/></td>
</tr>
<tr>
<td nowrap><label for="firstname">First Name:</label></td>
<td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="FName" id="firstname" value="" placeholder="Firstname"/></td>
</tr>
<tr>
<td nowrap><label for="firstname">Comit ID:</label></td>
<td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="commitid" id="commitid" value="" placeholder="Comit ID"/></td>
</tr>
<tr>
<td nowrap><label for="aim">AIM:</label></td>
<td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="aim" name="AIM" placeholder="AIM Number"/></td>
</tr>
<tr>
<td nowrap><label for="busunit" class="select">Business Unit:</label></td>
<td><select name="Dept" data-mini="true" id="busunit" class="resultset">
<option value=""></option>
</select></td>
</tr>
<tr>
<td nowrap><label for="phone">Phone Number:</label></td>
<td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="phone" name="Phone" placeholder="Phone Number"/></td>
</tr>
<tr>
<td nowrap><label for="resultnumber" class="select">No of Results:</label></td>
<td><select name="resultnumber" data-mini="true" id="resultnumber" class="resultset">
<option value="10">10</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select></td>
</tr>
</table>
<button type="submit" data-mini="true" data-theme="a" rel="external" data-ajax="false">Submit</button>
</form></div><!-- End of Form -->
</div><!-- End of Content -->
</div><!-- End of Page -->
</body>
</html>
これは問題としてドロップダウンを持っている唯一のページです、そしてそれがテーブルにあるので私はそれがほとんどポジティブです。私は他のいくつかのことを試しましたが、IEですべてを適切にレイアウトすることができませんでした（企業環境では必須になる傾向があります）。
代替ソリューション（左側の残りのスペースを占めるラベルとフィールドに自動幅ノーラップがある場合）は、少なくともIE8で機能する限り、完全に受け入れられます（ただし、IE6も同様に機能します）。
@GlennGのコメントを使用すると、ドロップダウンが正しく表示されますが、入力フィールドに問題があります。
HTML
<p class="testing2">
<label class="testing" for="lastname">Last Name:</label>
<input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" name="LName" id="lastname" value="" placeholder="Lastname"/>
</p>
<p class="testing2">
<label class="testing" for="firstname">First Name:</label>
<input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="FName" id="firstname" value="" placeholder="Firstname"/>
</p>
<p class="testing2">
<label class="testing" for="firstname">Comit ID:</label>
<input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="commitid" id="commitid" value="" placeholder="Comit ID"/>
</p>
<p class="testing2">
<label class="testing" for="aim">AIM:</label>
<input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="aim" name="AIM" placeholder="AIM Number"/>
</p>
<p class="testing2">
<label class="testing" for="busunit" class="select">Business Unit:</label>
<select name="Dept" data-mini="true" id="busunit" class="resultset">
<option value=""></option>
</select>
</p>
<p class="testing2">
<label class="testing" for="phone">Phone Number:</label>
<input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="phone" name="Phone" placeholder="Phone Number"/>
</p>
<p class="testing2">
<label class="testing" for="resultnumber" class="select">No of Results:</label>
<select name="resultnumber" data-mini="true" id="resultnumber" class="resultset">
<option value="10">10</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</p>
<button type="submit" data-mini="true" data-theme="a" rel="external" data-ajax="false">Submit</button>
CSS
#testing{
display:block;
width: 200px;
float: left;
clear: left;
}
#testing2{
clear: both;
}
そして、ブラウザからの実際のHTMLは次のようになります（firebugから取得）
<p class="testing2">
<label class="testing ui-input-text" for="lastname">Last Name:</label>
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini">
<input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase;" name="LName" id="lastname" value="" placeholder="Lastname" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a>
</div>
</p>
<p class="testing2">
<label class="testing ui-input-text" for="firstname">First Name:</label>
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini">
<input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase; font-family: Arial;" name="FName" id="firstname" value="" placeholder="Firstname" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a>
</div>
</p>
<p class="testing2">
<label class="testing ui-input-text" for="firstname">Comit ID:</label>
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini">
<input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase; font-family: Arial;" name="commitid" id="commitid" value="" placeholder="Comit ID" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a>
</div>
</p>
<p class="testing2">
<label class="testing ui-input-text" for="aim">AIM:</label>
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini">
<input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase;" id="aim" name="AIM" placeholder="AIM Number" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a>
</div>
</p>
<p class="testing2">
<label class="testing ui-select" for="busunit">Business Unit:</label>
<div class="ui-select">
<div class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-block ui-btn-icon-right" data-mini="true" data-inline="false" data-theme="c" data-iconpos="right" data-icon="arrow-d" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true">
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span></span>
<select name="Dept" data-mini="true" id="busunit" class="resultset">
<option value=""></option>
undefined
<option value="BD">ALCENTRA INC - *BD*</option>
<option value="HI">APPLICATION DEVELOPMENT - *HI*</option>
</select>
</div>
</div>
</p>
<p class="testing2">
<label class="testing ui-input-text" for="phone">Phone Number:</label>
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini">
<input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase;" id="phone" name="Phone" placeholder="Phone Number" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a>
</div>
</p>
<p class="testing2">
<label class="testing ui-select" for="resultnumber">No of Results:</label>
<div class="ui-select">
<div class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-block ui-btn-icon-right ui-btn-up-c" data-mini="true" data-inline="false" data-theme="c" data-iconpos="right" data-icon="arrow-d" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true">
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">10</span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span></span>
<select name="resultnumber" data-mini="true" id="resultnumber" class="resultset">
<option value="10">10</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</p>
<div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-block ui-btn-up-a" data-mini="true" data-inline="false" data-theme="a" data-iconpos="" data-icon="" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true">
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Submit</span></span><button aria-disabled="false" class="ui-btn-hidden" type="submit" data-mini="true" data-theme="a" rel="external" data-ajax="false">Submit</button>
</div>
入力フィールドは幅全体を占め、ラベルからのフロートを無視して、ラベルを重ねています。