لماذا يعرض كل من Chrome وFirefox وIE عناصر تحكم SELECT ذات العرض الثابت بشكل مختلف؟

https://stackoverflow.com/questions/135076

02-07-2019
|

سؤال

أنا أكون فقدان الشعر على هذا واحد ...يبدو أنه عندما أقوم بإصلاح العرض، فإن عنصر تحكم HTML SELECT يعرض عرضه بشكل مختلف اعتمادًا على المتصفح.

هل لديك أي فكرة عن كيفية توحيد ذلك دون الحاجة إلى اللجوء إلى أوراق أنماط متعددة؟

هذا ما أعمل معه:

.combo
{
    padding: 2px;
    width: 200px;
}

.text
{
    padding: 2px;
    width: 200px;
}

هذا هو نوع المستند الخاص بي للصفحة:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

المحلول

ستكون عناصر التحكم في النماذج دائمًا أقل طاعة لمحاولات التصميم، ولا سيما التحديدات ومدخلات الملفات، لذا فإن الطريقة الوحيدة لتصميمها بشكل موثوق عبر المتصفحات ومع وضع التدقيق المستقبلي في الاعتبار، هي استبدالها بـ JavaScript أو Flash وتقليد وظائفها

نصائح أخرى

حاول الإعداد font-size على التحديدات أيضًا، مما قد يؤثر على كيفية عرضها.ضع في اعتبارك أيضًا min-width و max-width ملكيات.

إدخال [type = text] ، حدد {الحدود:الصلبة 1 بكسل #c2c1c1؛عرض:150 بكسل؛حشوة:2 بكسل؛}

// ثم

حدد {العرض:156بكسل;// يحتاج إلى إدخال [type = text] عرض + (الحدود والحشو)}

/* الإدخال [type = text] width = width + padding + border

العرض المحدد يساوي العرض فقط.يتم عرض الحشو والحدود داخل قيد العرض هذا.هذه هي الطريقة التي يتم بها تشغيل SELECT...

تأكد من إزالة جميع الهوامش والحشوات الافتراضية وتعريفها بشكل صريح.تأكد من أنك تستخدم DOCTYPE مناسبًا وبالتالي يتم عرض IE في الوضع القياسي.

يمكنك استخدام عنصر واجهة المستخدم المنسدل المزيف واستبدال SELECT.

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

كتب إريك ماير مقالًا جيدًا حول هذا الموضوع:

http://meyerweb.com/eric/thinkts/2007/05/15/formal-weirdness/

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

جرب استخدام فايربوغ أو ميزة "فحص العنصر" في Chrome (انقر بزر الماوس الأيمن على عنصر التحكم المحدد، ثم انقر فوق "فحص العنصر") لمعرفة خصائص النمط التي يتم توريثها/عرضها لهذا الكائن المحدد بالضبط.يجب أن يقودك ذلك في الاتجاه الصحيح.

لقد جربت كل هذه الاقتراحات..وأخيراً حصلت عليه لذا فهو يبدو جيدًا في IE وFirefox.يبدو أن هناك خطأ ما في المساحة المتروكة في عنصر التحكم SELECT.إذا قمت بزيادة عرض التحديد بمقدار 2 بكسل، فسيصبح الحجم الآن صحيحًا.

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

ومع ذلك، لا يزال Chrome لا يُظهرها بنفس الحجم.

مارتينيتور صحيح.

يبدو أنك تحاول التحكم في عرض أنواع مختلفة من المدخلات أو القوائم عبر العربات.يمكنك تحديد الكائن مباشرة وتحديد العرض.على سبيل المثال:

select {
  width:350px;
}

أو يمكنك القيام بذلك باستخدام منطقة النص:

select {
      width:350px;
}

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

input[type=text] {
      width:350px;
}

input[type=input] {
      width:350px;
}

input[type=file] {
      width:350px;
}

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

لا تنتمي إلى StackOverflow