Internet Explorer 8的響應式Web表單/網站
[英]Responsive Web forms/ Website for Internet Explorer 8
問題描述
我正在嘗試創建一個適合任何瀏覽器和屏幕分辨率的自適應網站。 我雖然很容易，但是卻使我產生了錯誤的印象。 特別是，我將要處理的大多數將來的用戶正在使用Internet Explorer 8。
我的問題是當我放大或調整窗口大小時，我想到了這個。 請點擊鏈接查看照片。
這是我的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>
1 個解決方案
解決方案1
1 已采納 2014-05-09 06:30:28
我看過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;
}
在width為25px的地方，這里確切發生的是，當放大或縮小完成后，25px仍將保持不變，我建議嘗試將px添加到％，以滿足您的要求，那么您就不會有任何問題
注意
當您使用css來div或td時，請確保父類位於％或px中，這取決於您如何將css寫入chill類，而其始終以％進行管理
從Chrome，IE（11）和FF檢查這3張圖片
<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;
}
針對 Internet Explorer 6 中響應式設計的小屏幕
[英]target small screens for responsive design in internet explorer 6
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Internet Explorer中的響應式設計
網站將不會顯示在Internet Explorer 7和8中
主頁對Internet Explorer 11無響應
Internet Explorer 9發布表單有何不同？
網站未加載到Internet Explorer 8、9或10中
Internet Explorer 7和8截斷網站內容
響應列寬在Internet Explorer中不響應
Internet Explorer 響應圖像丟失縱橫比
針對 Internet Explorer 6 中響應式設計的小屏幕
網站褪色效果在Internet Explorer中不起作用
相關標簽