ホームページ >ウェブフロントエンド >htmlチュートリアル >IE6 は min-height をサポートしていません。 高さ適応の問題を解決する方法_html/css_WEB-ITnose

IE6 は min-height をサポートしていません。 高さ適応の問題を解決する方法_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:41:371197ブラウズ

IE6 は min-height をサポートしていません。 高さの適応の問題を解決する方法:
IE6 ブラウザーは多くの問題を抱えており、ここで紹介します。 min-height 属性により、アダプティブ問題に対して高さが不能になります。他の標準ブラウザでは、min-height 属性を使用してコンテナの最小高さを指定できますが、コンテンツがこの最小高さを超えると、コンテナは高さ適応効果を実現するために自動的に引き伸ばされます。はこの属性をサポートしていますが、IE6 自体には高度な適応性の特性があるため、height 属性と min-height 属性を同時に使用すれば、次のような高度な適応性のある効果を実現できると思われるかもしれません。

実行結果から判断すると、IE6 は高い適応性を実現していますが、他の標準ブラウザではコンテナの高さが 100px であり、min-height 属性が height 属性によってオーバーライドされるため、オーバーフローが発生します。 。したがって、上記の CSS コードは次のコードと同等になります:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.mytest {  width:100px;  height:100px;  min-height:100px;  border:1px solid green;}</style></head><body><div class="mytest">欢迎大家来到蚂蚁部落,希望能够给予有益的建议和意见,在这里再次感谢了!</div></body></html>

CSS コードを次のように変更しましょう:

width:100px;height:100px;border:1px solid green;

高度に適応性を実現できるように、コードに height:auto! important を追加しました。効果がありますが、height:auto! important の優先順位が height:100px よりも高いため、最小高さの効果はありません。コードを再度変更します:

width:100px;height:auto!important;height:100px;border:1px solid green;

上記の CSS コードを使用すると、すべてのブラウザの適応性の高い問題と互換性を持たせることができます。

元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0429/422.html

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