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

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 21, 2016 am 09:46 AM

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

ie7 の絶対的な高さの崩壊

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

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

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;	&lt;title&gt;&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;.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: &quot;20&quot;;	visibility: hidden;	height: 0;	display: block;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;	&lt;div class=&quot;content clearfix&quot;&gt;		&lt;div class=&quot;left clearfix&quot;&gt;			&lt;div class=&quot;img&quot;&gt;&lt;/div&gt;		&lt;/div&gt;		&lt;div class=&quot;right clearfix&quot;&gt;			&lt;div class=&quot;detail&quot;&gt;&lt;/div&gt;		&lt;/div&gt;			&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

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

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

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;	&lt;title&gt;&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;.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: &quot;20&quot;;	visibility: hidden;	height: 0;	display: block;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;	&lt;div class=&quot;content clearfix&quot;&gt;		&lt;div class=&quot;left clearfix&quot;&gt;			&lt;div class=&quot;img&quot;&gt;&lt;/div&gt;		&lt;/div&gt;		&lt;div class=&quot;right clearfix&quot;&gt;			&lt;div class=&quot;detail&quot;&gt;&lt;/div&gt;		&lt;/div&gt;			&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。