عنصر DOM العرض يمكن أن يكون غير صحيحا ؟

https://stackoverflow.com/questions/637358

10-07-2019
|

سؤال

لدي بعض صفحة واحدة التي div يتم محاذاة العناصر عن طريق جافا سكريبت.جافا سكريبت التحقق من مجرد مجموعة من شعبة العناصر إلى العثور على ماكس offsetWidth, ثم تعيين جميع div عناصر' العرض أن يكون ماكس offsetWidth.يعمل الكمال في معظم المتصفحات و لغات, لكنه فشل في الفرنسية-فرنسا في فايرفوكس على ماك.في هذه الحالة, محتوى div الكتمان.

<div id="divFoo">
    Heure de d&#233;but :
</div>

فوق HTML, الرموز أدناه تقرير "79".

javascript:alert(document.getElementById('divFoo').offsetWidth);

ولكن تحت كود تقرير "79.1333 px".

javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))

الفجوة بين 79.1333 و 79 يجعل غير صحيحة العرض تعيين النمط المضمن.

كنت اعتقدت أن offsetWidth و العرض ينبغي أن يكون دائما عدد صحيح.هل هناك أي طريقة لجعل offsetWidth جولة بشكل صحيح ؟

المحلول

هناك فرق بين نمط CSS القاعدة (التي getComputedStyle() أو رينزو Kooi هو getStyle() سوف تعطيك) الفعلية المحسوبة بالبكسل كما هو محدد من قبل المستخدم العميل.

وهذا يرجع جزئيا إلى حقيقة أن جزئية بكسل القيم الممكنة في CSS, ولكن وكيل المستخدم يجب أن تختار كيف تجعل جزئية بكسل (حاليا, أعتقد أنهم كل جولة لأعلى أو لأسفل ، ولكن متناسقة جدا ، خاصة عند ترجمة النسب إلى بكسل [انظر هنا]).

المهم هذه الخلافات موجودة ، وخاصة وكلاء المستخدم تنفيذ صفحة كاملة التكبير.

على سبيل المثال, أنا جعلت حالة اختبار مع هذا:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Fractional pixels</title>
    <style type="text/css" media="screen">
        #fractional {
            width: 17.5px;
            height: 16.1333px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="fractional"></div>
</body>
</html>

التكبير في خطوة واحدة في سفاري 4 بيتا, CSS العرض هو كما ذكرت 17.5 بكسل وارتفاع 16.1333 px.ولكن offsetWidth 21 جهاز بكسل ، offsetHeight 19 جهاز بكسل.

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow