1

我有一个正在处理的页面,其中有一些字段元素和下拉列表,它应该看起来像这样:布局

我现在已经在表格中设置了它,代码如下所示:

<!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 中正确布置所有内容(这在企业环境中往往是强制性的)。

替代解决方案(我们在标签上设置了 auto width nowrap 并且字段占据了左侧的其余空间)是完全可以接受的,只要它们至少在 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

输入字段占据整个宽度并忽略标签中的浮动,然后重叠标签。

4

0 回答 0