الحشو لإدخال النص في IE ... ممكن؟

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

سؤال

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

في الحقيقة ... لا يبدو مثل الحشو على مدخلات النص يعمل على الإطلاق في IE.

ولديهم التعليمة البرمجية التالية 


<style type="text/css">
#mainPageSearch input {
    width: 162px;
    padding: 2px 20px 2px 2px;
    margin: 0;
    font-size: 12px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
    border-color:#C6C6C6 #C6C6C6 #E3E3E3;
    border-style:solid;
    border-width:1px;
    color:#666666;
}
#mainPageSearch {
    margin-bottom: 10px;
    position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
    display: block;
    position: absolute;
    top:0px;
    right: -2px;
    text-indent: -2000em;
    height: 22px;
    width: 22px;
    background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>


<form id="mainPageSearch" action="">
    <input type="text"/>
    <a id="mainPageSearchButton" href="#">Search</a>
</form>

هل ما أحاول القيام به ممكن أو ينبغي أن مجرد تمتص منه والتعامل مع النص تسير تحت زر البحث؟

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

وربما سوف يجعل فئة جديدة لهذا إدخال النص الذي يجعل من شفافية وتعيين أسلوب إدخال النص العادي إلى div الذي يحتوي؟ ما رأيك؟

تعديل : في آسف وأرجو أن يكون تضمنت DOCTYPE ... ومن هنا: 

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

وأيضا، المشاكل أواجه هي في IE 7

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

المحلول

وحاول استخدام خط الطول

نصائح أخرى

وكان لي هذه المشكلة أيضا ط حلها عن طريق إضافة السطر التالي 

input 
{
    overflow:visible;
    padding:5px;
}

وأمل أن يساعد هذا؟ اسمحوا لي أن أعرف.

وحاول border-right بدلا من padding-right. هذا العمل بالنسبة لي.

تأكد الخاص بك إدخال أساليب شفافة ومكان داخل شعبة الحاوية:

http://jsfiddle.net/LRWWH/211/

وHTML 

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

وCSS 

 .input-container {
    background:red;
    overflow:hidden;
    height: 26px;
    margin-top:3px;        
    padding:6px 10px 0px;
    width: 200px;
  }

 .input-transparent {
    background-color:transparent;
    border:none;
    overflow:hidden;        
    color:#FFFFF;
    width: 200px;
    outline:none;
  }

وهناك المغلق إصلاح فقط لأنه 

div.search input[type="text"] {
    width: 110px;
    margin: 0;
    background-position: 0px -7px;
    text-indent:0;
    padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
    background-position-x: -16px;
    padding-left: 0px;
    line-height: 2.5em;
}

والشكر محمد عاطف تشوغتاي

وسيكون لديك لاستخدام تعويم: يسار / يمين على 'إدخال #mainPageSearch' قبل أن تتمكن من تطبيق الحشو / هامش

.

ولقد واجهت مشكلة مماثلة - IE تم حشوة حقل الإدخال، ولكن ليس مما يجعلها أكبر، الأمر الذي دفع النص أسفل داخل منه. I ثابتة من خلال تحديد ارتفاع مدخلات كذلك. محاولة ذلك.

ولدي العمل التالية في IE7. ما هو إصدار أنك تستهدف؟ 

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />

وماذا عن إعلان DOCTYPE؟

وبإضافة <!DOCTYPE html> الحشو يعمل الكبرى بالنسبة لي في IE8. خذ البرمجية التالية كمثال: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top