لقد كان توافق المتصفح دائمًا مشكلة شائعة في تخطيط CSS، وقد واجه المبتدئون العديد من سوء الفهم بسبب هذا، ومن خلال تجربتي، قمت بتلخيص طريقتين لتجنب معظم مشكلات توافق المتصفح.
تتمتع هاتان الطريقتان بالمزايا التالية:
1. لا حاجة لاستخدام HACK
2. بسيطة وفعالة، يمكنك فهم ذلك في لمحة
3. التخطيط الهرمي والمعياري
4. الكود أكثر منطقية وأسهل في التعرف عليه
الطريقة الأولى: حل اختلال المحاذاة العائمة الناتج عن إضافة مسافات داخلية وخارجية
نحتاج عادةً إلى استخدام عناصر DIV العائمة في التخطيطات متعددة الأعمدة، وعادةً ما نكتب 3 عناصر DIV للتخطيط المكون من 3 أعمدة.
.gif)
لتحقيق هذا التأثير، سنضيف هامشًا للسماح بتباعد العمود بشكل مباشر، ونضيف أيضًا حدًا، بالإضافة إلى حشوة لمنع النص الموجود بالداخل من الالتصاق بالحدود. ولكن حدث شيء غير متوقع بعد كتابة الكود، حدث الموقف التالي:
.gif)
ركض العمود الثالث أدناه. هذا ليس التأثير الذي تريده. لذلك دعونا نحللها. اتبع الفكرة العامة. العرض الإجمالي هو 800 بكسل، و200 بكسل للعمود الأيسر، و400 بكسل للعمود الأوسط، و200 بكسل للعمود الأيمن. يبدو هذا جيدًا، ولكن يجب أن تكون هناك فجوة بين هذه الأعمدة، لذا يتعين عليك تغييرها: 190 بكسل للعمود. العمود الأيسر، 400 بكسل للعمود الأوسط، و190 بكسل للعمود الأيمن، هل هذا جيد؟
ولكن لجعلها تبدو أفضل، يمكنك إضافة الحدود. لكنني نسيت أن الحد سيزيد العرض أيضًا، بالإضافة إلى ذلك، قمت بزيادة حشوة العمود: 10 بكسل، لذا يصبح العرض الفعلي: العمود الأيسر: العرض 200-تباعد خارجي 10-تباعد داخلي 20-حدود. 2=168، حتى لا يكون هناك اختلال. لكن ألا تعتقد أن الأمر معقد بعض الشيء ربما تحتاج إلى آلة حاسبة؟ ستكون هناك اختلافات في عرض بعض المتصفحات بهذا التخطيط.
حسنًا، لنتحدث عن طريقتي. وفقًا للتقسيم الهرمي، أقوم بفصل التخطيط والعرض. يعني التخطيط أنه بالإضافة إلى العرض والتعويم، يضيف التخطيط تباعدًا خارجيًا على الأكثر، بحيث يسهل علي إجراء الحساب. ثم نضيف DIV آخر إلى عمود التخطيط خصيصًا لعرض الحدود والتباعد الداخلي والخارجي وما إلى ذلك. لا تحتاج إلى تحديد العرض، فقط قم بتعديله. لكي تسهل عليك التذكر، قمت بارتجال قصيدة: يجب أن يكون العرض الثابت عائمًا، بدون حدود أو بقع، ضع DIV بالداخل، وسيعمل النمط المحدد!
الطريقة الثانية: حل مشكلة انفصال العناصر العائمة الداخلية عن الطبقة الخارجية
من أجل إنشاء كتالوج المنتج أو ألبوم الصور، نستخدم UL أو N DIVs للتعويم، ويكون التأثير المطلوب كما يلي:
.gif)
لكنها جاءت بنتائج عكسية مؤخرًا، حيث تبدو الشاشة كما يلي، وقد انتقلت الحدود الخارجية إلى الأعلى:
.gif)
الحل لهذه المشكلة هو في الواقع بسيط جدا.
1. يمكنك إضافة float:left إلى الطبقة الخارجية لحل المشكلة.
2. هناك طريقة أخرى تتمثل في وضع DIV في النهاية لمسح العوامة بعد انتهاء العوامة.
3. أضف الارتفاع أو العرض إلى الطبقة الخارجية.