ارتفاع أعمدة جدول HTML ؛ يعمل في Firefox وليس في IE
https://stackoverflow.com/questions/250931
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي بعض HTML الذي يعرض غرامة على Firefox3/Opera/Safari ولكن ليس مع IE7. المقتطف كما يلي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body bgcolor="#AA5566" >
<table width="100%">
<tr>
<td height="37" valign="top"><img style="float:right;" border="0" src="foo.png" width="37" height="37"/></td>
<td width="600" rowspan="2" >
<table width="600" height="800"><tr><td><img src="bar.jpg" width="600" height="800"/></td></tr></table>
</td>
<td height="37" valign="top"><img style="float:left;" border="0" src="foo.png" width="37" height="37"/></td>
</tr>
<!-- This row doesnt fill the vertical space on IE7 //-->
<tr>
<td valign="top" bgcolor="#112233"> </td>
<td valign="top" bgcolor="#112233"> </td>
</tr>
</table>
</body>
لن يملأ الصف الثاني المساحة العمودية التي تم إنشاؤها بواسطة العمود الأوسط للصفوف الأولى (لاحظ Rowspan = "2") بشكل صحيح. بدلاً من ذلك ، تتوسع الأعمدة الأولى والثالثة في الصفوف الأولى والثالثة على الرغم من أنني قمت بضبط ارتفاعها على 37. الصورة أدناه توضح ما يحدث في IE7 و Firefox3 ...
تحرير: تمت إضافة نوع DOC HTML إلى SNIPPIT CODE. وأضاف لقطة شاشة.
أي مساعدة موضع تقدير ، شكرا :)
المحلول
ماذا لو جربته مثل هذا:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body bgcolor="#AA5566" >
<table width="100%" border='1'>
<tr>
<td valign="top">
<table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
<td width="600" rowspan="2" >
<table width="600" height="800"><tr><td>asdf</td></tr></table>
</td>
<td valign="top">
<table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
</tr>
</table>
</body>
نصائح أخرى
ستكون الإجابة الصحيحة هي: لا تخطط صفحتك باستخدام الجداول.
ستكون الإجابة الفنية هي: خلايا الجدول الخاصة بك تفعل ما من المفترض أن تفعله ، أي لا يمكنك حل مشكلتك في بنية الكود التي تستخدمها.
ستكون الإجابة المخترقة هي: وجود الخلايا الموجودة على اليسار واليمين لتكون على ارتفاع 37 بكسل ، عليك إضافة جدولين متداخلين إضافيين في الخلية اليمنى واليسرى.
لست متأكدًا تمامًا من سبب حدوث ذلك. ما هو التصميم الذي تحاول تحقيقه ، هل يجب أن تكون طاولة؟ يجب ألا تخطط صفحات مع الجداول ، يجب استخدامها فقط للبيانات الجدولية الحقيقية.
هل فكرت في استخدام divs؟
رميها من خلال المدقق وأنا متأكد من أنك ستقترب قليلاً.
في الواقع - ما تراه هو سلوك طبيعي لـ IE: إضافة Border = "1" إلى طاولتك الرئيسية وسيظهر لك ما يحدث أكثر وضوحًا.
