الخطوط العريضة CSS باستخدام حدود CSS

Question

للأسف، لم يتم دعم مخطط CSS في IE7، لذلك أنا عالق باستخدام الحدود. ولكن إضافة حدود إلى أي عنصر في الصفحة تأخذ الغرفة وربما يحول الصفحة.

إذا قمت بإضافة حدود 2PX، فأنا قمت بتعيين هامش A -2Px، فهو مثالي، كعناصر قائمة تتحرك إلى اليسار، و "الهامش: تلقائي" مسامير حقا معه.

يمكنك رؤية أمثلة هنا:

http://paul.slowgeek.com/nodeselector/tests/simple.html.

http://paul.slowgeek.com/nodeselector/tests/center1.html.

على سبيل المثال، إذا كان الصفحة كانت:

<div>
    <p>Lorem Ipsum</p>
</div>

ثم فعلت:

<div>
    <p style="border: 5px solid red">Lorem Ipsum</p>
</div>

ستكون الصفحة الآن 10 أطراف PX وأكبر عنصر P 5 بكسل بادئة. ولكن إذا فعلت:

<div>
    <p style="outline: 5px solid red">Lorem Ipsum</p>
</div>

في فايرفوكس 3، ستكون الصفحة نفس الارتفاع بالضبط وسيكون العنصر في نفس الموقف. أريد هذا السلوك للعمل عبر المتصفح.

في الأساس، كيف يمكنك استخدام حدود CSS للحصول على تأثير مخطط CSS؟

Answer 1

إذا كانت الآثار التي تحوم بها تشعر بالقلق، وخلفيتك هي لون موحد، فقم ببساطة بتعيين الحدود غير المرحزة OT العناصر على لون الخلفية، ثم قم فقط بتغيير اللون على التحويم. وبالتالي فإن العنصر هو دائما نفس الحجم، على الرغم من أنك سوف تضطر إلى تقليل الحشو لضبط الحدود دائما هناك.

لذلك بدلا من

a p {padding: 10px;}
a:hover {border: 5px solid red;}

استعمال

a p {border: 5px solid white;padding:5px}
a:hover p {border-color: red;}

جانبا، إذا كنت تستخدم: تحوم على أي عنصر آخر غير رابط أو إدخال، فلن يتم رؤية أي تأثير في IE6، والذي لا يزال هناك الكثير من الناس يستخدمون. ولكن يمكنك استخدام البرنامج النصي IE7 لإصلاح ذلك: http://code.google.com/p/ie7-js/