إزالة حدود الصورة المراوغة في Chrome/IE9

عند عرض الصور في Chrome أو IE9، قد تواجه حدودًا رفيعة مستمرة على الرغم من الإعداد "المخطط التفصيلي: لا شيء" و"الحدود: لا شيء" في CSS. تنشأ هذه المشكلة بسبب سلوك Chrome الغريب الذي يتجاوز "الحدود: لا شيء".

لمواجهة هذا، يمكنك استخدام تقنية ذكية تتضمن ضبط عرض الصورة وارتفاعها على 0 بكسل مع حشوها بقيم البكسل المقابلة. إلى حجم الزر المطلوب. خذ بعين الاعتبار مثال CSS التالي:

#dlbutn {
    display: block;
    width: 0px;
    height: 0px;
    outline: none;
    padding: 43px 51px 43px 51px;
    margin: 0 auto 5px auto;
    background-image: url(/images/download-button-102x86.png);
    background-repeat: no-repeat;
}

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