响应CSS以适应任何浏览器和解决方案 [英] Responsive css to fit in any browser and resolution
本文介绍了响应CSS以适应任何浏览器和解决方案的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题是每当我放大tool_button淡出时其他控件请帮忙谢谢！
这是我有..
CSS
* {
保证金：0;
填充：0;
}
html，正文{
身高：100％;
背景：＃ecf0f1;
}
body {
font-family：helvetica，arial，sans-serif;
宽度：100％;
overflow-y：scroll;
}
.main {
width：100％;
身高：100％;
}
.panel {
最小高度：100％;
}
.sidebar {
width：8％;
背景颜色：＃111;
text-align：center;
头寸：固定;
}
.sidebar ul {
padding：24px 0;
}
.main-box {
float：right;
宽度：75％;
保证金率：15％;
margin-top：2％;
背景：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;
颜色：＃555;
padding：4px;
}
.textgroup span
{
display：inline-block;
宽度：10％;
border：1px solid＃2980b9;
padding：5px;
/ *背景：＃bdc3c7; * /
背景：＃2980b9;
border-radius：2px;
}
.textgroup span img
{
vertical-align：bottom;
宽度：16px;
身高：16px;
padding：0px 1px;
}
.textgroup input [type = textbox]
{
border：1px solid＃b0b0b0;
padding：5px;
margin-left：-1px;
宽度：75％;
}
.checkgroup，.emptygroup
{
vertical-align：top;
font-weight：bold;
font-size：10px;
颜色：＃444;
display：block;
}
.emptygroup
{
vertical-align：top;
font-weight：bold;
font-size：10px;
颜色：＃444;
display：block;
margin-top：-11px;
}
.checkgroup，.emptygroup
{
padding：5px;
}
.checkgroup input [type =checkbox]
{
display：none;
}
.emptygroup输入[type =checkbox]
{
display：none;
}
.checkgroup span
{
display：inline-block;
宽度：15％;
border：1px solid #ccc;
填充：4px;
border-radius：2px 0 0 2px;
text-align：left;
背景：＃2980b9;
color：#fff;
font-size：7pt;
}
.emptygroup span
{
display：inline-block;
宽度：15％;
padding：4px;
text-align：left;
背景：无;
margin-left：2px;
}
.checkgroup span img，.emptygroup span img
{
vertical-align：bottom;
width：16px;
height：16px;
padding：0px 5px;
}
.checkgroup标签，.emptygroup标签
{
vertical-align：top;
margin-left：-1px;
宽度：18％;
text-align：left;
text-indent：5px;
display：inline-block;
border：1px solid #ccc;
padding：6px 5px;
font-size：7pt;
}
.emptygroup标签
{
vertical-align：top;
margin-left：-1px;
宽度：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）;
颜色：#fff;
}
.emptygroup input [type =checkbox]：checked + label
{
background：＃555;
颜色：#fff;
}
.no_ne
{
height：11px;
}
.tool_button {
float：right;
头寸：固定;
width：90px;
背景：＃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.pngid =add>< p class =txt-add>< / p>< / li>
< li>< img src =images / view.pngid =view>< p class =txt-view>< / p>< / li>
< li>< img src =images / setting.pngid =setting>< p class =txt-setting>< / p>< / li>
< li>< / img src =images / logout.pngid =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 =textboxplaceholder = >< / TD>
< td class =textgroup>< span>< img src =images / cos.png>< / span>< input type =textboxplaceholder =Version /长度>< / TD>
< td class =textgroup>< span>< img src =images / cos.png>< / span>< input type =textboxplaceholder =电视广播日期>< / TD>
< / tr>
< tr>
< td class =textgroup>< span>< img src =images / platform2.png>< / span>< input type =textboxplaceholder = >< / TD>
< td class =textgroup>< span>< img src =images / cos.png>< / span>< input type =textboxplaceholder =Cost >< / TD>
< td class =textgroup>< span>< img src =images / cos.png>< / span>< input type =textboxplaceholder =Account Executive >< / TD>
< / tr>
< tr>
< td class =textgroup>< span>< img src =images / platform2.png>< / span>< input type =textboxplaceholder = >< / TD>
< td class =textgroup>< span>< img src =images / cos.png>< / span>< input type =textboxplaceholder =参考编号>< / TD>
< / tr>
< tr>
< td class =textgroup>< span>< img src =images / cos.png>< / span>< input type =textboxplaceholder =Product >< / TD>
< td class =textgroup>< span>< img src =images / cos.png>< / span>< input type =textboxplaceholder = >< / TD>
< / tr>
< / table>
< / div>
< div class =main-box>
< p class =checkgroup>< span>< img src =images / program.png> PROGRAM：< / span>< input type =checkboxid =程序替换/>< label for ='program-replaced'> SAMPLE< / label>< input type =checkboxid =program-blocktimer/>< label for ='program < / block> SAMPLE< / label>< input type =checkboxid =not-in-bms/>< label for ='not-in-bms'> SAMPLE< / label> < / p为H.
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE：< / span>< input type =checkboxid =1/>< label for ='1'> SAMPLE< / label>< input type =checkboxid =2/>< label for =' 2'class =no_ne>< / label>< input type =checkboxid =3/>< label for ='3'class =no_ne>< / label> < / p为H.
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE：< / span>< input type =复选框id =4/>< label for ='4'> TO& BG DO NOT TALLY< / label>< input type =checkboxid =5/>< label for ='5'> SAMPLE< / label>< input type =checkboxid = 6/>< label for ='6'class =>< / label>< / p>
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE< / span>< ; input type =checkboxid =6/>< label for ='6'> SAMPLE< / label>< input type =checkboxid =7/>< label for ='7'class =no_ne>< / label>< input type =checkboxid =not-in-bms/>< label for ='not-in-bms'class = no_ne >< /标签>< / p为H.
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE< / span>< input type =checkboxid =8/>< label for ='8'> SAMPLE< / label>< input type =checkboxid =9/>< label for ='9'class =no_ne >< / label>< input type =checkboxid =10/>< label for = '11'class =no_ne>< / label>< / p>
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE< / span>< input type =checkboxid =12/>< label for ='12'> SAMPLE< / label>< input type =checkboxid =13/>< label for ='13'> SAMPLE< / label>< input type =checkboxid =14/>< label for ='14'> SAMPLE< / label>< / p>
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE：< / span>< input type =复选框id =15/>< label for ='15'> SAMPLE< / label>< input type =checkboxid =16/>< label for ='16'> SAMPLE< / label>< input type =checkboxid =17/>< label for ='17'> SAMPLE< / label>< / p>
< p class =checkgroup>< span>< img src =images / program.png> < / span>< input type =checkboxid =18/>< label for ='18'> SAMPLE< / label>< input type =checkboxid =19/ < label for ='19'> SAMPLE< / label>< input type =checkboxid =20/>< label for ='20'> SAMPLE< / label>< / p为H.
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE：< / span>< input type =复选框id =21/>< label for ='21'> SAMPLE< / label>< input type =checkboxid =22/>< label for ='22'> SAMPLE< / label>< input type =checkboxid =23/>< label for ='23'> WITH CP / INV< / label>< / p>
< p class =checkgroup>< span>< img src =images / program.png> SAMPLE：< / span>< input type =复选框id =24/>< label for ='24'> SAMPLE< / label>< input type =checkboxid =25/>< label for ='25'> SAMPLE< / label>< input type =checkboxid =26/>< label for ='26'> SAMPLE< / label>< / p>
< / div>
< div style =clear：both;>< / div>
< div class =tool_button>
< input type =submitid =formsubmittext =SUBMIT>
< input type =submitid =formcleartext =CLEAR>
< / div>
< / div>
< / body>
< / html>
解决方案
tool_button上的位置是固定的。使它相对，它将留在窗口内
Hi everyone can you pls help me?? What Im trying to do is everytime i ZOOM IN the BROWSER i want it to still fit on the screen or browser SPECIALLY in IE! Please..
The problem is everytime i zoom in the tool_button fades and the other controls please help thanks!
this is what i have..
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>
解决方案
the position on the tool_button is fixed. make it relative and it will stay inside the window
这篇关于响应CSS以适应任何浏览器和解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
