هل هناك أي طريقة لإزالة الحدود السوداء لـ IE حول زر الإرسال في النماذج النشطة؟

StackOverflow https://stackoverflow.com/questions/126445

  •  02-07-2019
  •  | 
  •  

سؤال

أقوم بتنفيذ تصميم يستخدم أزرار إرسال ذات تصميم مخصص.إنها ببساطة أزرار رمادية فاتحة ذات حدود خارجية أغمق قليلاً:

input.button {
    background: #eee;
    border: 1px solid #ccc;
}

يبدو هذا صحيحًا تمامًا في Firefox وSafari وOpera.المشكلة في Internet Explorer الإصدارين 6 و7.

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

إذا قمت بإيقاف تشغيل الحدود، فستختفي الحدود السوداء الإضافية في IE أيضًا.أنا أبحث عن طريقة للحفاظ على حدودي الطبيعية، ولكن مع إزالة المخطط التفصيلي.

هل كانت مفيدة؟

المحلول

حسنا هذا يعمل هنا:

<html>
    <head>
        <style type="text/css">
            span.button {
                background: #eee;
                border: 1px solid #ccc;
            }

            span.button input {
                background:none;
                border:0;
                margin:0;
                padding:0;
            }   
        </style>
    </head>
    <body>
        <span class="button"><input type="button" name="..." value="Button"/></span>
    </body>
</html>

نصائح أخرى

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

<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->

عملت بالنسبة لي.

أعلم أنني تأخرت عن اللعبة لمدة عامين تقريبًا، لكنني وجدت حلاً آخر (على الأقل لـ IE7).

إذا قمت بإضافة آخر input type="submit" إلى النموذج الخاص بك قبل أي زر إرسال آخر في النموذج سوف تختفي المشكلة.الآن تحتاج فقط إلى إخفاء هذا الزر الجديد الذي يمتص الحدود السوداء.

هذا يناسبني (يجب أن يكون الفائض "تلقائيًا"):

<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />

ملحوظة:أنا أستخدم مستند HTML5 (<!doctype html>).

لقد وجدت إجابة تناسبني في منتدى آخر.يقوم بإزالة الحدود السوداء غير المرغوب فيها في IE6 وIE7.من المحتمل أن بعضًا/كثيرًا منكم لم يضع إدخاله = "إرسال" في علامات النموذج.لا تغفل هذا.لقد نجح الأمر بالنسبة لي بعد المحاولة كل شئ آخر.

إذا كنت تستخدم زر إرسال، فتأكد من وجوده داخل نموذج وليس مجرد مجموعة حقول:

<form><fieldset><input type="submit"></fieldset></form>

لقد تمكنت من دمج اقتراح ديفيد مردوخ مع بعض تطبيقات JQuery بحيث يتم تطبيق الإصلاح تلقائيًا على جميع عناصر "الإدخال: الإرسال" في الصفحة:

// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
            $('<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />')
.insertBefore("input:submit");
        }

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

إنه يعمل، لكنه يبدو خاطئًا بعض الشيء، بطريقة ما.

أنا أبني على مثال @nickmorss لاستخدام المرشحات التي لم تنجح حقًا في وضعي ...بدلاً من ذلك، كان استخدام مرشح التوهج أفضل بكثير بالنسبة لي.

<!--[if IE]>
<style type="text/css">
    input[type="submit"], input[type="button"], button
    {
        border: none !important;
        filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
        height: 24px; /* I had to adjust the height from the original value */
    }
</style>
<![endif]-->

حسنًا، حسنًا، إليك حل قبيح لتزنه...عصا الزر في <span>, ، قم بقصف الحدود الموجودة على الزر وقم بإعطاء الحدود للامتداد بدلاً من ذلك.

IE غير متأكد بعض الشيء بشأن هوامش عناصر النموذج لذا قد لا يعمل هذا بدقة.ربما يساعد إعطاء النطاق نفس خلفية الزر في هذا الصدد.

span.button {
    background: #eee;
    border: 1px solid #ccc;
}

span.button input {
    background: #eee;
    border:0;
}

و

<span class="button"><input type="button" name="..." value="Button"/></span>

أفضل حل وجدته هو نقل الحدود إلى عنصر التفاف، مثل هذا:

<div class='submit_button'><input type="submit" class="button"></div>

مع هذا CSS:

.submit_button         { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }

المشكلة الرئيسية في هذا الحل هي أن الزر أصبح الآن عنصر كتلة، ويجب أن يكون عرضه ثابتًا.يمكننا استخدام inline-block، إلا أن Firefox2 لا يدعمه.

أي حلول أفضل هي موضع ترحيب.

أعتقد أن المرشح: chroma (color =#000000) ؛كما ذكرنا سابقًا، هو الأفضل حيث يمكنك التقديم في فصل معين.وإلا فسيتعين عليك الذهاب وتطبيق علامة إضافية على كل زر لديك إذا كنت تستخدم الفصول الدراسية بالطبع.

.buttonstyle {filter: chroma (color =#000000) ؛لون الخلفية: #E5813C صلب؛الحدود السفلية:#cccccc 1px صلب؛الحدود اليسرى:#cccccc 1px صلب؛الحدود اليمنى:#cccccc 1px صلب؛أعلى الحدود:#cccccc 1px صلب؛اللون: #FF9900؛خط العائلة:فيردانا، أريال، هلفتيكا، سانس-سيريف؛حجم الخط:10 بكسل؛وزن الخط:عريض؛زخرفة النص:لا أحد؛} أن فعل ذلك بالنسبة لي!

لقد واجهت هذه المشكلة وقمت بحلها باستخدام div حول الزر وعرضها ككتلة ووضعها يدويًا.كانت هوامش الأزرار في IE وFF غير قابلة للتنبؤ بها ولم تكن هناك طريقة ليكونا سعيدين.كان يجب أن يكون زر الإرسال الخاص بي مصطفًا بشكل مثالي مقابل الإدخال، لذلك لن يعمل بدون وضع العناصر ككتل.

هذا سوف يعمل:

input[type=button]
{
       filter:chroma(color=#000000);
}

هذا يعمل حتى مع button العلامة، وفي النهاية يمكنك استخدام الملف بأمان background-image خاصية المغلق.

قد يكون الحل المتسلل هو استخدام العلامات مثل هذا:

<button><span>Go</span></button>

وقم بتطبيق أنماط الحدود الخاصة بك على عنصر الامتداد.

إضافة *الحدود: لا شيء هذا يزيل الحدود لـ IE6 و IE7 ، ولكن يحتفظ به للمتصفحات الأخرى

مع تقنية الأبواب المنزلقة، استخدم اثنين spans داخل button.والقضاء على أي تنسيق على button في تجاوز IE الخاص بك.

<button><span class="open">Search<span class="close"></span></span></button>

لا أستطيع التعليق (حتى الآن) لذلك لا بد لي من إضافة تعليقي بهذه الطريقة.أنا شيء السيد.نصيحة ديفيد مردوخ هي الأفضل لأوبرا ( هنا ).يا إلهي، يا لها من فتاة جميلة لديه.

لقد جربت أسلوبه في Opera ونجحت بشكل أساسي في مضاعفة علامات الإدخال بهذه الطريقة:

<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />

بهذه الطريقة يكون العنصر الأول مخفيًا ولكنه يلتقط تركيز العرض الذي ستعطيه Opera لعنصر الإدخال الثاني بدلاً من ذلك.أحبها!

على الأقل في IE7 يمكنك تصميم الحدود على الرغم من أنه لا يمكنك إزالتها (اضبطها على لا شيء).لذا قم بتعيين لون الحدود على نفس اللون الذي يجب أن تكون عليه خلفيتك. 

.submitbutton { 
background-color: #fff;
border: #fff dotted 1px; 
}

إذا كانت خلفيتك بيضاء.

الإجابة الصحيحة على هذا السؤال هي:

outline: none;

...يعمل مع IE وChrome، على حد علمي.

بالنسبة لي الكود أدناه يعمل بالفعل.

<!--[if IE]>
    <style type="text/css">
    input[type=submit],input[type=reset],input[type=button]
        {
            filter:chroma(color=#000000);
            color:#010101;
        }
    </style>
<![endif]-->

حصلت عليه من @Mark's إجابة وتحميلها فقط لIE.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top