لماذا الارتفاع لا يساوي ![]()
ارتفاعها عند doctype هو XHTML 1.0 صارمة؟
https://stackoverflow.com/questions/1450274
-
11-09-2019
- |
-
سؤال
<!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" lang="en" xml:lang="en">
<head>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" colspan="5">
<span class="validationInline">*</span>
<span class="hint">Required fields</span>
</td>
</tr>
<tr>
<td colspan="5" background="http://media.monster.com.hk/bgr_8.gif">
<img src="/static/cleardot.gif" height="1" width="1" />
</td>
</tr>
</table>
</body>
</html>
يمكن التحقق من ذلك هنا:http://maishudi.com/tt2.html.
لقد عرفت أنه بسبب DocType، لأن حذف هذا الجزء سيجعله طبيعيا:
إذن ما الخطأ؟ كيف يمكنني أن أجعلها تعمل مع DocType؟
المحلول
ملاحظة: هذا ربما يعتمد على المتصفح.
حجم العنصر على مستوى كتلة (TD، DIV، إلخ) إن لم يكن محدد سيكون كبيرا كما هو مطلوب، وفقا للمساحة التي اتخذتها محتواه. إذا تم تحديدها، فسيحاول التوسع وفقا لذلك، إلا إذا كان المحتوى أكبر، في هذه الحالة سوف تتوسع حسب الضرورة.
في مثالك، تحتوي الخلية على حرف واحد (مساحة غير كسر)، والتي تأخذ حجم سطر واحد. وبالتالي، يجب أن يكون عنصر الكتلة ارتفاعا واحدا على الأقل؛ لا يمكن أن تحمل أي حجم أصغر. هذا هو السبب في تجاهل إعلان ارتفاعك.
قد ترغب في استخدام هذا النمط:
line-height: 1px;
هذا يعين ارتفاع الخط إلى 1PX. Line-Height ليس عنصرا، لذلك لا تنطبق القاعدة المذكورة أعلاه.
نصائح أخرى
إضافة كتلة نمط مع هذه القاعدة
td img {display: block;}
ونرى https:/developer.mozilla.org/en/images ،_tables ،_and_mysterious_gaps. للحصول على تفسير كامل.
الخلفية ليست سمة قياسية لعناصر TD هي السبب. بدلا من ذلك استخدام:
style="background: url(/path/to/image.png);"
بالنسبة لصورة 1 بكسل الخاصة بك، أفترض أن هذا ببساطة لجعل خلية الطاولة تظهر؟ إذا كان الأمر كذلك، فهذا ليس الطريقة المنصوص عليها في القيام بذلك. يمكنك إما:
table { empty-cells: show; }
في CSS على الرغم من أنني لا أعتقد أن IE6 يدعم ذلك. أكثر الطرق المتوافقة مع المعايير هي استخدام مساحة غير كسر:
<td> </td>
لا تنتمي إلى StackOverflow
-
11-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
<!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" lang="en" xml:lang="en">
<head>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" colspan="5">
<span class="validationInline">*</span>
<span class="hint">Required fields</span>
</td>
</tr>
<tr>
<td colspan="5" background="http://media.monster.com.hk/bgr_8.gif">
<img src="/static/cleardot.gif" height="1" width="1" />
</td>
</tr>
</table>
</body>
</html>
يمكن التحقق من ذلك هنا:http://maishudi.com/tt2.html.
لقد عرفت أنه بسبب DocType، لأن حذف هذا الجزء سيجعله طبيعيا:
إذن ما الخطأ؟ كيف يمكنني أن أجعلها تعمل مع DocType؟
المحلول
ملاحظة: هذا ربما يعتمد على المتصفح.
حجم العنصر على مستوى كتلة (TD، DIV، إلخ) إن لم يكن محدد سيكون كبيرا كما هو مطلوب، وفقا للمساحة التي اتخذتها محتواه. إذا تم تحديدها، فسيحاول التوسع وفقا لذلك، إلا إذا كان المحتوى أكبر، في هذه الحالة سوف تتوسع حسب الضرورة.
في مثالك، تحتوي الخلية على حرف واحد (مساحة غير كسر)، والتي تأخذ حجم سطر واحد. وبالتالي، يجب أن يكون عنصر الكتلة ارتفاعا واحدا على الأقل؛ لا يمكن أن تحمل أي حجم أصغر. هذا هو السبب في تجاهل إعلان ارتفاعك.
قد ترغب في استخدام هذا النمط:
line-height: 1px;
هذا يعين ارتفاع الخط إلى 1PX. Line-Height ليس عنصرا، لذلك لا تنطبق القاعدة المذكورة أعلاه.
نصائح أخرى
إضافة كتلة نمط مع هذه القاعدة
td img {display: block;}
ونرى https:/developer.mozilla.org/en/images ،_tables ،_and_mysterious_gaps. للحصول على تفسير كامل.
الخلفية ليست سمة قياسية لعناصر TD هي السبب. بدلا من ذلك استخدام:
style="background: url(/path/to/image.png);"
بالنسبة لصورة 1 بكسل الخاصة بك، أفترض أن هذا ببساطة لجعل خلية الطاولة تظهر؟ إذا كان الأمر كذلك، فهذا ليس الطريقة المنصوص عليها في القيام بذلك. يمكنك إما:
table { empty-cells: show; }
في CSS على الرغم من أنني لا أعتقد أن IE6 يدعم ذلك. أكثر الطرق المتوافقة مع المعايير هي استخدام مساحة غير كسر:
<td> </td>