IE의 텍스트 입력을 패딩… 가능합니까?

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

문제

나는 검색 버튼 절대 배치가있는 텍스트 입력을 가지고 있습니다 ... 버튼의 공간을 만들기 위해 텍스트가 버튼 아래로 이동하는 것을 막기 위해 패딩을 사용했지만, Firefox에서는 작동하지만 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 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;
  }

CSS 만 해결해야합니다

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;
}

감사합니다 Muhammad Atif Chughtai

패딩/마진을 적용하기 전에 '#MainPagesearch Input'에서 Float : Left/Right를 사용해야합니다.

비슷한 문제가 발생했습니다. 즉, 입력 필드를 패딩하고 있었지만 더 크게 만들지 않아 텍스트를 안쪽으로 밀어 넣었습니다. 입력의 높이를 설정하여 고정했습니다. 시도해보십시오.

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