响应CSS以适应任何浏览器和分辨率

-1

大家好，你能帮助我吗？什么我试图做的是每次我放大在浏览器我希望它仍然适合在屏幕或浏览器SPECIALLY在IE浏览器！请..响应CSS以适应任何浏览器和分辨率

问题是每次我放大tool_button淡入淡出和其他控件请帮助谢谢！

这就是我..

CSS

* { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     background:#ecf0f1; 
    } 

    body { 
     font-family: helvetica, arial, sans-serif; 
     width: 100%; 
     overflow-y: scroll; 
    } 

    .main { 
     width: 100%; 
     height: 100%; 
    } 

    .panel { 
     min-height: 100%; 
    } 

    .sidebar { 
     width: 8%; 
     background-color: #111; 
     text-align: center; 
     position: fixed; 
    } 

    .sidebar ul { 
     padding: 24px 0; 
    } 

    .main-box { 
     float: right; 
     width: 75%; 
     margin-right:15%; 
     margin-top:2%; 
     background:rgba(255,255,255,0.2); 
     box-shadow:rgba(0,0,0,0.6) 0 1px 4px 0; 
     border-bottom:10px solid #0dabc9; 
     } 

    h2 
    { 

     font-size: 10pt; 
     font-weight: bold; 
    } 

    img 
    { 
     height:50px; 
     width:50px; 
    } 


    .tabletextgroup 
    { 
    margin-top:20px; 
    margin-bottom:20px; 
    } 

    .textgroup 
    { 
     position:relative; 
     font-weight:bold; 
     font-size:11px; 
     color:#555; 
     padding:4px; 
    } 

    .textgroup span 
    { 
     display:inline-block; 
     width:10%; 
     border:1px solid #2980b9; 
     padding:5px; 
     /*background:#bdc3c7;*/ 
     background:#2980b9; 
     border-radius:2px; 
    } 

    .textgroup span img 
    { 
     vertical-align:bottom; 
     width:16px; 
     height:16px; 
     padding:0px 1px; 
    } 

    .textgroup input[type=textbox] 
    { 
     border:1px solid #b0b0b0; 
     padding:5px; 
     margin-left:-1px; 
     width:75%; 
    } 

    .checkgroup, .emptygroup 
    { 
    vertical-align:top; 
    font-weight:bold; 
    font-size:10px; 
    color:#444; 
    display:block; 
    } 

    .emptygroup 
    { 
    vertical-align: top; 
    font-weight:bold; 
    font-size:10px; 
    color:#444; 
    display: block; 
    margin-top:-11px; 
    } 

    .checkgroup, .emptygroup 
    { 
    padding:5px; 
    } 


    .checkgroup input[type="checkbox"] 
    { 
    display:none; 
    } 

    .emptygroup input[type="checkbox"] 
    { 
    display:none; 
    } 

    .checkgroup span 
    { 
    display:inline-block; 
    width:15%; 
    border:1px solid #ccc; 
    padding:4px; 
    border-radius:2px 0 0 2px; 
    text-align: left; 
    background:#2980b9; 
    color:#fff; 
    font-size:7pt; 
    } 

    .emptygroup span 
    { 
    display:inline-block; 
    width:15%; 
    padding:4px; 
    text-align:left; 
    background:none; 
    margin-left:2px; 
    } 


    .checkgroup span img, .emptygroup span img 
    { 
    vertical-align:bottom; 
    width:16px; 
    height:16px; 
    padding:0px 5px; 
    } 

    .checkgroup label, .emptygroup label 
    { 
    vertical-align:top; 
    margin-left:-1px; 
    width:18%; 
    text-align:left; 
    text-indent:5px; 
    display:inline-block; 
    border:1px solid #ccc; 
    padding:6px 5px; 
    font-size:7pt; 
    } 

    .emptygroup label 
    { 
    vertical-align: top; 
    margin-left:-1px; 
    width:18%; 
    text-align:left; 
    text-indent:5px; 
    display:inline-block; 
    border:1px solid #ccc; 
    border-top:0; 
    padding:6px 5px; 
    font-size:7pt; 
    } 

    .checkgroup input[type="checkbox"]:checked + label 
    { 
    background: #555; 
    //box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,.3); 
    color: #fff; 
    } 

    .emptygroup input[type="checkbox"]:checked + label 
    { 
    background:#555; 
    color:#fff; 
    } 

    .no_ne 
    { 
    height:11px; 
    } 

    .tool_button{ 
    float:right; 
    position:fixed; 
    width:90px; 
    background:#0DABC9; 
    margin-left:1100px; 
    margin-top:-590px; 
    border-top:30px solid #555; 
    border-radius:5px; 
    }

HTML

<body> 

<div class="main"> 
    <div class="sidebar panel"> 
     <ul> 
      <li><img src="images/add.png" id="add"><p class="txt-add"></p></li> 
      <li><img src="images/view.png" id="view"><p class="txt-view"></p></li> 
      <li><img src="images/setting.png" id="setting"><p class="txt-setting"></p></li> 
      <li><img src="images/logout.png" id="logout"><p class="txt-logout"></p></li> 
     </ul> 
    </div> 
    <div class="main-box "> 
     <table class = "tabletextgroup"> 
      <tr> 
      <td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Platform"></td> 
      <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Version/Length"></td> 
      <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Telecast date"></td> 
      </tr> 
      <tr> 
      <td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Agency"></td> 
      <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Cost"></td> 
      <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Account Executive"></td> 
      </tr> 
      <tr> 
      <td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Advertiser"></td> 
      <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Reference Number"></td> 
      </tr> 
      <tr> 
      <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Product"></td> 
      <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Program"></td> 
      </tr> 
     </table> 
     </div> 



     <div class="main-box "> 
      <p class="checkgroup"><span><img src = "images/program.png">PROGRAM :</span><input type="checkbox" id="program-replaced"/><label for='program-replaced'>SAMPLE </label><input type="checkbox" id="program-blocktimer"/><label for='program-blocktimer'>SAMPLE </label><input type="checkbox" id="not-in-bms"/><label for='not-in-bms'>SAMPLE</label></p> 


      <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="1"/><label for='1'>SAMPLE</label><input type="checkbox" id="2"/><label for='2' class = "no_ne"></label><input type="checkbox" id="3"/><label for='3' class = "no_ne"></label></p> 

      <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="4"/><label for='4'>TO & BG DO NOT TALLY</label><input type="checkbox" id="5"/><label for='5'>SAMPLE</label><input type="checkbox" id="6" /><label for='6' class = ""></label></p> 



      <p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="6"/><label for='6'>SAMPLE</label><input type="checkbox" id="7"/><label for='7' class = "no_ne"></label><input type="checkbox" id="not-in-bms"/><label for='not-in-bms' class = "no_ne"></label></p> 

       <p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="8"/><label for='8'>SAMPLE</label><input type="checkbox" id="9"/><label for='9' class = "no_ne"></label><input type="checkbox" id="10"/><label for='11' class = "no_ne"></label></p> 

       <p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="12"/><label for='12'>SAMPLE</label><input type="checkbox" id="13"/><label for='13'>SAMPLE</label><input type="checkbox" id="14"/><label for='14'>SAMPLE</label></p> 

       <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="15"/><label for='15'>SAMPLE</label><input type="checkbox" id="16"/><label for='16'>SAMPLE</label><input type="checkbox" id="17"/><label for='17'>SAMPLE</label></p> 




       <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="18"/><label for='18'>SAMPLE</label><input type="checkbox" id="19"/><label for='19'>SAMPLE</label><input type="checkbox" id="20"/><label for='20'>SAMPLE</label></p> 

       <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="21"/><label for='21'>SAMPLE</label><input type="checkbox" id="22"/><label for='22'>SAMPLE</label><input type="checkbox" id="23"/><label for='23'>WITH CP/INV</label></p> 

       <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="24"/><label for='24'>SAMPLE</label><input type="checkbox" id="25"/><label for='25'>SAMPLE</label><input type="checkbox" id="26"/><label for='26'>SAMPLE</label></p> 
     </div> 



    <div style="clear: both;"></div> 
    <div class = "tool_button"> 
     <input type = "submit" id = "formsubmit" text = "SUBMIT"> 
     <input type = "submit" id = "formclear" text = "CLEAR"> 
     </div> 

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

来源

2014-05-06 eiv

尝试使用bootstrap也许？ –

哦@Newbie我不知道如何使用bootstrap我认为这不是我的好主意，因为我甚至不知道如何在bootstrap上工作，但是你的帮助很大。 – eiv

在tool_button的位置是固定的。使它相对，它会留在窗口内

来源

2014-05-06 00:16:13

是的，它现在工作得很好..以及放大部分怎么样？我花了很多时间解决这个问题。特别是在IE8中。 – eiv

缩放是什么意思？调整窗口大小或按下Ctrl +实际缩放浏览器？ –

是啊按按Ctrl +放大浏览器它实际上似乎每次我按控制+放大控件错位，输入字段已变形！请帮助我想要发生的事情是当我放大设计时仍然会保持相同的高度和宽度。 – eiv

响应CSS以适应任何浏览器和分辨率

回答

相关问题