[ie7][絶対値と浮動小数点数]で高さが崩れる問題について_html/css_WEB-ITnoseを解決してください-htmlチュートリアル-php.cn

[ie7][絶対値と浮動小数点数]で高さが崩れる問題について_html/css_WEB-ITnoseを解決してください

WBOY

リリース： 2016-06-21 09:46:03

オリジナル

1546 人が閲覧しました

この投稿は wangyinshu によって最終編集されました: 2013-09-12 16:58:05

ie7 の絶対的な高さの崩壊

ie8 以降のこのコードは私が達成したい効果ですが、ie7 ではどういうわけか左右のクラスの高さが発生します崩れ落ちた。専門家に答えを求めてください。 ie7 と互換性を持たせる方法

コードは次のとおりです:

<!DOCTYPE html><html><head>	<title></title><style type="text/css">.content{	position: absolute;	top: 20px;	bottom: 20px;	background-color: #eee;	left: 0;	right: 0;}.left{	height: 100%;	width: 40%;	float: left;	position: relative;	background-color: #888;}.right{	position: relative;	height: 100%;	width: 60%;	float: left;	background-color: #666;}.img{	width: 100px;	background-color: red;	height: 200px;	float: right;	position: relative;	top: 50%;	margin-top: -100px;}.detail{	width: 300px;	height: 300px;	float: left;	position: relative;	top: 50%;	margin-top: -150px;	background-color: green;}.clearfix{	*zoom: 1;}.clearfix:after,.content-style:after{	clear: both;	content: "20";	visibility: hidden;	height: 0;	display: block;}</style></head><body>	<div class="content clearfix">		<div class="left clearfix">			<div class="img"></div>		</div>		<div class="right clearfix">			<div class="detail"></div>		</div>			</div></body></html>

ログイン後にコピー

ディスカッションに返信 (解決策)

コードを貼り付けるのを忘れましたコードは次のとおりです:

<!DOCTYPE html><html><head>	<title></title><style type="text/css">.content{	position: absolute;	top: 20px;	bottom: 20px;	background-color: #eee;	left: 0;	right: 0;}.left{	height: 100%;	width: 40%;	float: left;	position: relative;	background-color: #888;}.right{	position: relative;	height: 100%;	width: 60%;	float: left;	background-color: #666;}.img{	width: 100px;	background-color: red;	height: 200px;	float: right;	position: relative;	top: 50%;	margin-top: -100px;}.detail{	width: 300px;	height: 300px;	float: left;	position: relative;	top: 50%;	margin-top: -150px;	background-color: green;}.clearfix{	*zoom: 1;}.clearfix:after,.content-style:after{	clear: both;	content: "20";	visibility: hidden;	height: 0;	display: block;}</style></head><body>	<div class="content clearfix">		<div class="left clearfix">			<div class="img"></div>		</div>		<div class="right clearfix">			<div class="detail"></div>		</div>			</div></body></html>

ログイン後にコピー

ie8 以降では、このコードは実現したい効果はあるのですが、ie7については分かりませんなぜ左右のクラスの高さが崩れてしまうのでしょうか？専門家に答えを求めてください。 ie7 と互換性を持たせる方法

あなたの身長:100% は ie7 では役に立たないようです。js を使用しないのはどうでしょうか

これはブラウザの問題です。回避方法はありません。代替手段を見つけてください