اختفاء زر الإرسال في IE7

Question

وتحية. أواجه مشاكل مع رمز إرث التالية. أنها على ما يرام في كل شيء ما عدا IE7، حيث يختفي زر الإرسال. الفضاء لا يزال يقم له على الصفحة، ولكنها لا تظهر. لقد حاولت بشتى الطرق لإجبار hasLayout، ولكن من دون نجاح. أي اقتراحات؟

وXHTML (XHTML 1.0 DOCTYPE الصارم):

<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>

وCSS:

#headerFunctionality {
    float: right;
    display: inline;
    margin: 24px 14px 25px 0; 
}

#headerSearch{
    float: left;
    margin-left: 20px;
    width: auto;
}

#headerSearch label{
    position: absolute;
    top: -5em;
    color: #FFF;
}

#headerSearch input.text{
    width: 133px;
    height: 18px;
    border: 1px solid #999;
    font-size: 0.69em;
    padding: 2px 3px 0;
    margin: 0 6px 0 0;
    float: left;
}

/* Replace search button with image*/
input#btn_search {
    width: 65px;
    height: 20px;
    padding: 20px 0 0 0;
    margin: 1px 0 0 0;
    border: 0;
    background: transparent url(../images/btn.search.gif) no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

input#btn_search:focus, input#btn_search:hover {

background: transparent url(../images/btn.search.over.gif) no-repeat center top;

و}

Answer 1

وأخيرا تم فرزها هذا عن طريق إزالة:

form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

وكنت قد شمل دائما هذا مع استبدال صورة CSS بعد قراءته في مكان ما منذ زمن بعيد، ولكن ترك ذلك لا يبدو أن أثرت أي متصفح آخر وحددت المشكلة في IE7.

Answer 2

هل تأكدنا من أن display:block تمت إضافة إلى المغلق على المدخلات؟ غتا أن تفعل خدعة.

Answer 3

وهذا يبدو وكأنه مسألة النص في الهامش / صورة إلى استبدال زر في IE6.0 و 7.0. عملت هذا الحل بالنسبة لي عدة مرات.

تأكد من أنماط منفصل لهذه الإصدارات متصفح ووضع هذا الرمز في رأس الخاص بك:

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

في ملف CSS، حاول شيئا من هذا القبيل (يمكنك تغيير هذا لإدخال # btn_search أو أيا كنت تستهدف على وجه التحديد)

#btn_search {
   width: 85px;
   height: 20px;
   padding: 20px 0 0 0;
   margin: 1px 0 0 0;
   border: 0;
   background: transparent url(../images/btn.search.gif) no-repeat center top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* for IE 5.x */
   font-size: 0;
   color: #fff;
   text-align: right;
   text-indent: 0;
}

و"لون" يجب أن يكون نفس لون الخلفية الخاصة بك.

و"عرض" يجب أن يكون مثل 20-30 بكسل أخرى من عرض الصور الخاصة بك.

ويمكن الاطلاع على مزيد من المعلومات والمساعدة هنا: <لأ href = "http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution" يختلط = "نوفولو" > http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

Answer 4

وهناك نوعان من الأشياء أستطيع أن أرى من التعليمات البرمجية التي يمكن أن تسبب هذا:

1 - في btn.search.gif صورة إما شفافة تماما، لون الخلفية أو غير موجود. زر ليس له لون الخلفية وليس لها حدود، لذلك لن تظهر إذا لم يكن للصورة / النص

2 - يتم تعيين الرؤية زر مقابل لا شيء، مما يترك مساحة على الصفحة ولكن لا تجعل زر. يمكنك إلقاء نظرة على الأنماط في الحرائق؟

Answer 5

وإذا قمت بإضافة <قوية> سمة اسم ، أو يعمل؟

Answer 6

والمشكلة على الأرجح يأتي من مقصلة علة . انها علة في IE6 و IE7 الذي يحدث عندما خلطات معينة من: تحوم، تطفو، وتخطيط موجودة (انظر الى الوصلة للمزيد من التفاصيل). وأعتقد أن إدخال هذا:

<div class="clear"><!-- --></div>

والحق قبل </form> ثم تطبيق CSS التالية إليه:

.clear {clear:both;}

وسوف إصلاحه.