HTML/CSS: إنشاء Div مركز مع عرض دقيقة
https://stackoverflow.com/questions/502196
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أرغب في الحصول على صفحتي div الذي يتركز ويحتوي على عرض معين ، ولكن يمتد إلى ما بعد هذا العرض إذا كان ذلك مطلوبًا من قبل المحتوى. أفعل هذا بما يلي:
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.container-center {
text-align: center;
}
.container-minwidth {
min-width: 5em;
display: inline-block;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container-center">
<div class="container-minwidth">
a
</div>
</div>
</body>
</html>
هذا يعمل بشكل رائع على Firefox/Safari ، ولكن ليس على IE6 ، الذي لا يفهم display: inline-block. أي نصيحة حول كيفية جعل هذا العمل على IE6 كذلك؟
المحلول
إنها ليست حلولًا مثالية ، لكنني حصلت على بعض القضايا المتعلقة بافتقار IE6 للدعم للعديد من العرض بالقول.
<style type="text/css">
.container-minwidth {
min-width: 5em;
width: auto !important;
width: 500px; /* IE6 ignores the !important tag */
/* would help for expanding content if it blows past 500px; */
overflow:auto;
display: inline-block;
border: 1px solid blue;
}
</style>
العلامة الأخرى التي قد تساعد في هذه الحالة هي علامة الفائض.
نصائح أخرى
في الواقع ، يفهم أليساندرو IE6 display: inline-block, ، ما لا يفهمه عن الكود الخاص بك هو min-width. هناك العديد من الاختراقات للحصول على هذا للعمل, ، لكنني لا أوصي بأي منهم. إذا كنت ستستخدم أيًا منها ، فتأكد من وضعها في ورقة أنماط محددة IE6 بحيث لا تتداخل مع متصفحات الشكاوى القياسية الأخرى.
<style type="text/css">
.container-minwidth {
min-width: 5em;
_width: 500px;
white-space:nowrap;
display: inline-block;
*display:inline;
*zoom:1;
border: 1px solid blue;
}
</style>
