تخطيط الجدول خاطئ في IE(7)
https://stackoverflow.com/questions/197266
-
10-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
يوجد أدناه رمز HTML بسيط مع تخطيط جدول.في FF انها تبدو كما أعتقد أنه ينبغي أن تبدو ،
في IE7 لا.ما الخطأ الذي افعله؟
وكيف يمكنني إصلاحه؟
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<TITLE>test</TITLE>
</head>
<body>
<table id="MainTable" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td colspan="4">
<div style='width:769; height:192;'>192
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style='width:383; height:100;'>100
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top">
<div style='width:190; height:100;'>100
</div>
</td>
<td valign="top" >
<div style='width:190; height:100;'>100
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
<tr>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
المحلول
أفترض أنك تشكو من الحد الأدنى لارتفاع الصف الأوسط (الذي يحتوي على خلايا ممتدة على صفوف فقط)، والارتفاع الموسع للصفوف المجاورة للتعويض، مع ترك فجوات بين divs.
لا يمكن لـ IE حساب ارتفاعات الصف المثالية عندما يحتوي الصف على خلايا ممتدة على صفوف فقط.الحل المعتاد عندما لا تتمكن مطلقًا من إعادة تنظيمه للتخلص من امتداد الصفوف هو إضافة عمود "وهمي" بحجم 1 بكسل إلى جانب واحد من الجدول، يحتوي على خلايا فارغة، كل منها مع تعيين "الارتفاع" على مدى ارتفاع الصف.
لكن نعم، اعتمادًا على ما تخطط للقيام به بهذا، قد يكون تخطيط CSS أكثر ملاءمة.إذا كان تخطيطًا ثابتًا لكل شيء مثل هذا المثال، فإن تحديد الموضع المطلق لكل div سيكون أسهل كثيرًا.
البتات الأخرى:تتطلب قيم العرض/الارتفاع في CSS وحدات (من المفترض أن تكون 'px')؛فالين / تباعد الخلايا / الخ.ويمكن القيام بذلك بسهولة أكبر في ورقة الأنماط حتى إذا كنت تستخدم تخطيطات الجدول؛قد يمنع DOCTYPE في الوضع القياسي بعضًا من أسوأ أخطاء IE (على الرغم من أنها ليست هذه الأخطاء القديمة غير المرتبطة بـ CSS).
نصائح أخرى
لبداية، يجب أن يكون القيم CSS الخاص بك وحدة، على سبيل المثال، يجب width:190; width: 190px;
وأتفق تماما، يمكنك إلقاء نظرة على CSS مخطط أو الأطر CSS أخرى لبعض المساعدة
للوهلة الأولى يبدو IE7 لديها بعض الدعم المكسور لهذا النوع من التنسيق. في البداية كنت ذاهبا إلى اقتراح للتخلص من عناصر div ونقل التنسيق (العرض والارتفاع) مباشرة على TD، لكنني حاولت أن ولا يبدو أن حل المشكلة.
وأعتقد أن هذا ليس حلا لطيفة، ولكن سيكون من الممكن أن تحل محل الخلايا روسبان مع المزيد من الخلايا مع حدود غير مرئية بينهما؟ لكن هذا الحل فشل إذا كان النص أكبر من حجم الخلية العليا.
واختيار DOCTYPE (4.01 الانتقالي مع عدم وجود معرف نظام (رابط)) يطلق وضع المراوغات في IE مما يجعله غير متناسقة للغاية مع المتصفحات الأخرى.
التبديل إلى:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">وأو على الأقل:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">(وبطبيعة الحال، التحقق من صحة لكن HTML و CSS (والذي من شأنه أن اختيار وحدات في عداد المفقودين على القيم طول الخاص بك)).
ويجب عليك ان تذهب بالتأكيد مع CSS. يجب عدم استخدام الجداول للتخطيط.
