IE8 下min-width遇到的一个情况

int80h 发布于 2018/07/23 20:14
阅读 278
收藏 0

      本人小白,在WIN7 64位 IE8下 运行自己写的一个HTML页面,给HTML,BODY设置了min-width,min-height属性

我为了对齐,所以在TABLE中写了SELECT标签以及Input,button标签,当打开页面后 点击标签前面文字,button则直接点击按钮, 这些标签会往下移动3个PX左右之后就无论怎么点击都正常了,第一次运行时这样,我无意中将min-width,min-height去掉后,竟然正常了,然后我就想,这个情况引起的标签是会向下移动一下,那我只去掉min-height应该就可以了,进行了测试,发现没有效果,然后又试了只去掉min-width,去掉后问题消失了。也就是说,在我的机器上的IE8浏览器下,设置min-width属性后会导致页面第一次显现后部分标签控件的显示位置并非它的正确位置(并不影响使用),我想问下这个问题的原因,有没有碰到同样情况的朋友。

用的HBUILDER编辑的

 

以下为代码,我已经去掉了min-width=100%;这一句。

<!DOCTYPE html>
<html class="full-size">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style> 
        html,body{
           min-height: 600px;
        }
        .full-size{
            width: 100%;
            height: 100%;
        }
        
        
        
        .top-div{
            height: 10%;
            background-color: orange;
        }
        .mid-div{
            height: 80%;
            background-color: blue;
        }
        .bottom-div{
            height: 10%;
            background-color: green;
        }
        
        
        
        
        .mid-left{
            width:200px;
            height: 100%;
            background-color: orangered;
        }
        .mid-right{
            height: 100%;
            background-color: blanchedalmond;
        }
        .mid-left select,input{
            
            width: 120px;
            box-sizing:border-box;
        }
    </style>
    <body class="full-size">
        <div class="full-size">
           <div class="top-div">
               <table class="full-size">
                   <tr>
                       <td>
                           
                       </td>
                   </tr>
               </table>
           </div>
           <div class="mid-div">
               <table class="full-size">
                   <tr>
                       <td class="mid-left">
                          <table class="full-size">
                              <tr><td><span id="test">采&nbsp;&nbsp;暖&nbsp;&nbsp;期</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>单&nbsp;&nbsp;元&nbsp;&nbsp;号</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>层&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>用户名称</span>
                                  <input type="text" value="" /></td></tr>
                              <tr><td><span>联系电话</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><span>用户编号</span>
                                  <select><option>请选择</option></select></td></tr>
                              <tr><td><input type="button" value="查询" onclick="show()" style="width: 100%;height: 30px;" /></td></tr>
                              <tr><td><input type="button" value="重置" onclick="show()" style="width: 100%;height: 30px;" /></td></tr>
                              
                              
                          </table>
                       </td>
                       <td class="mid-right">
                           
                       </td>
                   </tr>
               </table>
           </div>
           <div class="bottom-div">
               <table class="full-size">
                   <tr>
                       <td>
                           
                       </td>
                   </tr>
               </table>
           </div>
        </div>
    </body>
    <script> 
        var test = document.getElementById("test");
        function show(){
            alert("width="+test.width+"  width="+test.offsetWidth);
            
        }
    
    </script>
</html>

 

 

加载中
返回顶部
顶部