Отзывчивые веб-формы/веб-сайт для Internet Explorer 8

Question

Я пытаюсь создать отзывчивый веб-сайт, который будет вписываться в любой браузер и разрешение экрана. Я, хотя это было бы легко, но это привело меня к моему неправильному впечатлению. Специально, что большая часть будущего пользователя, с которым я буду иметь дело, использует Internet Explorer 8.

Моя проблема в том, когда я увеличиваю или изменяю размер окна, я придумываю это. Нажмите на ссылку, чтобы увидеть фотографию.

Tinypic image

Вот мой CSS и HTML разметки.

CSS

* 
      { 
       padding:0; 
       margin:0; 
      } 

      html 
      { 
       overflow:auto; 
      } 

      html, body 
      { 
       margin:auto; 
       width:100%; 
       height:100%; 
       overflow:auto; 
       margin:auto; 
       background:#eee; 
      } 

      .placeholder 
      { 
       color:#aaa; 
      } 

      .main 
      { 
       width:100%; 
       height:100%; 
       overflow:auto; 

      } 

      .nav 
      { 
       width:9%; 
       min-width:9%; 
       background:#111; 
       text-align: center; 
       position:absolute; 
      } 

      .panel 
      { 
       min-height:100%; 
      } 

      .nav ul 
      { 
       margin-top:110%; 
      } 

      .nav ul a 
      { 
       text-decoration:none; 
       border:none; 
      } 

      a img 
      { 
       border:0; 
       outline:none; 

      } 

      a:active, a:focus 
      { 
       outline:none; 
       border:none; 
      } 


      .nav li 
      { 
       display:block; 
       float:center; 
       color:#fff; 
       text-align:center; 
      } 


      .nav #logout, #add, #view, #setting 
      { 
       border-bottom:1px solid #3a3a3a; 
      } 

      .nav #add 
      { 
       border-top:1px solid #3a3a3a; 
      } 

      .nav li:hover 
      { 
       background:#333; 

      } 

      .nav li img 
      { 
       padding:20px 0 20px 0; 
       height:55%; 
       width:55%; 
      } 

      .nav_text 
      { 
       color:#777; 
       font-family:helvetica; 
       font-size: 70%; 
       text-align:center; 
       margin-top:-10px; 
       text-indent:-5px; 
       margin-bottom:5px; 
      } 

      .main_bar 
      { 
       display:inline-block; 
       margin-right:3%; 
       background:#fff; 
       float:right; 
       width:75%; 
       border-bottom:10px solid #3498db; 
       margin-top:10px; 
       background:rgba(255,255,255,0.2); 
       box-shadow:rgba(0,0,0,0.9) 0 1px 4px 0; 
       border-bottom:10px solid #0dabc9; 
       /*zoom: 1; 
       filter:progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=0), 
         progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=90), 
         progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=180), 
         progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=300); 
       */ 
      } 

      .tool_bar 
      { 
       width:10%; 
       background:#333; 
       height:50%; 
       float:right; 
       position:relative; 
       margin-right:2%; 
       margin-top:10px; 
       border-top:30px solid #3498db; 
      } 

      .second_bar 
      { 
       display:block; 
       margin-right:15%; 
       background:#fff; 
       float:right; 
       width:75%; 
       border-bottom:10px solid #3498db; 
       margin-top:10px; 
       background:rgba(255,255,255,0.2); 
       box-shadow:rgba(0,0,0,0.9) 0 1px 4px 0; 
       border-bottom:10px solid #0dabc9; 
       zoom:1; 
       filter:progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=0), 
         progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=90), 
         progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=180), 
         progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=300); 
      } 

      .draft 
      { 
       position:relative; 
       font-weight:bold; 
       font-size:11px; 
       font-family:Helvetica; 
       color:#555; 
       padding:4px; 

      } 

      .draft span 
      { 
       position:absolute; 
       display:inline-block; 
       width:25px; 
       border:1px solid #2980b9; 
       padding:5px; 
       border-radius:3px 0 0 3px; 
       /*background:#bdc3c7;*/ 
       background:#2980b9; 
      } 

      .draft span img 
      { 
       vertical-align:bottom; 
       width:16px; 
       height:16px; 
       padding:0px 5px; 

      } 

      .draft input[type=textbox] 
      { 
       /*position:absolute;*/ 
       border:1px solid #b0b0b0; 
       border-radius:0 5px 5px 0; 
       padding:5px; 
       margin-left:-1px; 
       width:155px; 
       padding-left:45px; 
      } 


      .draft input[type=textbox]:focus 
      { 
       outline:none; 
      } 

HTML

<body> 
       <div class = "main"> 
       <div class = "nav panel"> 
       <ul> 
       <li id = "add"><a href = "#"><img src = "images/add.png"><p class = "nav_text">ADD</p></a></li> 
       <li id = "view"><a href = "#"><img src = "images/add.png"><p class = "nav_text">VIEW</p></a></li> 
       <li id = "setting"><a href = "#"><img src = "images/add.png"><p class = "nav_text">MAINTENANCE</p></a></li> 
       <li id = "logout"><a href = "#"><img src = "images/add.png"><p class = "nav_text">LOGOUT</p></a></li> 
       </ul> 
       </div> 
       <div class = "tool_bar"></div> 
       <div class = "main_bar"> 
        <table class = "tabledraft"> 
         <tr> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         </tr> 
         <tr> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         </tr> 
         <tr> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         </tr> 
         <tr> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
         </tr> 
        </table> 
       </div> 

      </div> 
      </body> 
      </html> 

Answer 1

Я видел CSS, большинство из них в%, как ширину, но это не

.draft span 
     { 
      position:absolute; 
      display:inline-block; 
      width:25px; 
      border:1px solid #2980b9; 
      padding:5px; 
      border-radius:3px 0 0 3px; 
      /*background:#bdc3c7;*/ 
      background:#2980b9; 
     } 

где ширина 25 пикселей, что именно h appens здесь есть, когда зум или Out сделано, 25px будет оставаться фиксированной, то, что я предлагаю, это попытаться добавить его пикс%, к вашему требованию, то вы не будете имея каких-либо проблем

ПРИМЕЧАНИЕ

при использовании CSS для Div или тд убедитесь, что родительский класс находится в% или рх, это зависит от того, как вы пишете CSS для охлаждения класса, его всегда удается в%

проверить эти 3 изображения из Chrome, IE (11) и FF

<div id="Main">sdfasfa 

 <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 

     <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
     <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td> 
     </tr> 

и CSS для выше

#Main 
{ 
Border:1px solid red; 
height:50%; 
width:70%; 
background-color:silver; 
} 
.draft 
{ 

font-weight:bold; 
font-size:11px; 
font-family:Helvetica; 
color:#555; 
padding:1%; 
border:1px solid black; 
width:20%; 
} 

.draft span 
{ 

display:inline-block; 
width:15%; 
border:1px solid #2980b9; 
padding:1%; 
border-radius:3px 0 0 3px; 
/*background:#bdc3c7;*/ 
background:#2980b9; 
} 

.draft span img 
{ 
vertical-align:bottom; 
width:5%; 
height:5%; 
padding:0px 5px; 

} 

.draft input[type=textbox] 
{ 
/*position:absolute;*/ 
border:1px solid #b0b0b0; 
border-radius:0 5px 5px 0; 
padding:2%; 
margin-left:1px; 
width:65%; 
padding-left:5%; 
} 


.draft input[type=textbox]:focus 
{ 
    outline:none; 
}