IE7で動作する「Ears」アドオンを備えたレイアウト、下部に「釘付け」された地下室
こんにちは
この投稿は、「Layout with“ Ears”」という投稿に基づいています。 この投稿のコメントから、この種のIE7のレイアウトを作成する際に実際の問題があることに気付きました。 それで、私は長い間仕事で使ってきたソリューションを提供することに決めました。そして、それは上記の投稿で表明された要件を完全に満たしています。
そのため、レイアウトでは次の要件を満たすことができます。
- 許可に関係なく、サイトの有益な部分は中央になければなりません。
- グラフィックブロック（耳）は左右に残り、これらの耳はブラウザの画面サイズが大きくなった場合にのみ表示され、サイズが小さい場合は、不適合部分が非表示になります（理想的には、水平スクロールバーがありません）。
- ページは600pxから1000pxのゴムである必要があります。
- 地下室は常に一番下まで押されています。
ラバーバージョンはFF3.5 +（FF3.11で動作可能）、IE7 +、Opera 9.64 +、Chrome、Safariで動作します。
修正バージョンはIE6 +で動作します。
実際の解決策：
HTMLの構造は次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "ru" >
<head>
<title> c «» 7 </title>
<meta http-equiv= "Content-Type" content= "text/html;charset=UTF-8" />
<!--[ if gt IE 7]><!-->
<link rel= "stylesheet" media= "screen" type= "text/css" href= "styles/main.css" />
<!--<![endif]-->
<!--[ if lt IE 8]>
<link rel=stylesheet media= "screen" type= "text/css" href= "styles/ie.css" />
<![endif]-->
</head>
<body>
<div class = "wrapper" >
<div class = "base" >
<div class = "main_row" >
<div class = "content_row" >
</div>
</div>
<div class = "header" >
<p>header</p>
<div class = "b_left ie" >left</div>
<div class = "b_right ie" >right</div>
</div>
</div>
<div class = "footer" >
</div>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter .
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100.01%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1.2;
}
/*---------------------------------------------------------------------------reset*/
html, body {
color: #968c79;
height: 100%;
font: normal 12px / 16px Tahoma,Geneva,sans-serif;
}
.wrapper{
position: relative;
max-width: 6000px; /* Chrome, Safari - 50% 0*/
width: 100%;
min-width: 600px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.base {
min-width: 600px;
max-width:1000px;
padding: 200px 0 166px;
margin: 0 auto;
}
/*---------------------------------------------------------------------------global*/
.ie{
display: none;
}
/*---------------------------------------------------------------------------global*/
.header {
z-index: 5;
position: absolute;
min-width: 600px;
max-width:1000px;
width: 100%;
height: 200px;
top: 0;
text-align: center;
color: #000;
background: #fff;
margin: 0 auto;
}
.header:before, .header:after{
z-index: 5;
position: absolute;
width: 100px;
height: 200px;
top: 0;
text-align: center;
font-size: 20px;
color: #000;
}
.header:before{
left: -100px;
background:#ddd;
content: "left";
}
.header:after{
right: -100px;
background:#ddd;
content: "right";
}
.main_row {
z-index: 2;
position: relative;
width: 100%;
background: #ddd;
overflow: hidden;
}
.content_row {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.footer {
z-index: 10;
position: absolute;
width: 100%;
height: 166px;
bottom: 0;
margin: 0 auto;
background: url(../i/footer.jpg) 0 0 repeat-x;
overflow: hidden;
}
IEのCSS
@import "main.css";
ie{
display: block;
}
.b_left, .b_right {
z-index: 5;
position: absolute;
display: block;
width: 100px;
height: 200px;
text-align: center;
font-size: 20px;
color: #000;
top: 0;
}
.b_left{
left: -100px;
background:#ddd;
}
.b_right{
right: -100px;
background:#ddd;
}
これが何であるか
-dl.dropbox.com/u/585674/test/index.html必要に応じて、レイアウトを固定レイアウトに変換でき、IE6 +で動作します（min-width + max-widthを固定するための安定した作業ソリューションが見つかりませんでした）。
Source: https://habr.com/ru/post/J107072/
All Articles