사라지는 제출 버튼 IE7

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

문제

인사드립니다.나는 데 문제는 다음과 같은 기존 코드입니다.그것은 환경에서는 좋은 제외한 모든 IE7 는 제출 버튼 사라집니다.공간은 여전히 남을 위해 그것은이 페이지에 표시되지 않.나는 시도 등 다양한 방법으로의 강제 hasLayout 지만,없는 성공이다.어떤 방법이 있나요?

XHTML(XHTML1.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;

}

도움이 되었습니까?

해결책 4

마지막으로 정렬하여 이를 제거하기:

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

난 항상 포함되어 있 이 CSS 이미지 보충을 읽은 후 그것이 어딘가에 전 연령대,하지만 떠나고 그것을 밖으로 보이지 않는 어떤 영향을 받는 다른 브라우저와 가정에 문제 IE7.

다른 팁

을 만들었는지 확인 display:block 에 추가 되었습 css 에 입력?는 것도 좋다.

이 같은 소리 text-indent/이미지를 교체할 수 있는 버튼 문제에 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;
}

"color"해야할 동일한 색상으로 당신의 배경입니다.

"width"같아야 한다 20-30 픽셀 이상의 폭이 당신의 이미지입니다.

더 많은 정보와 도움말은 여기에서 찾을 수 있습니다: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

두 가지가 볼 수 있는 코드에서는 발생할 수 있습 this:

1-이미지 btn.search.gif 거나 완전히 투명하고,컬러의 배경 또는 발견되지 않습니다.버튼에 없는 배경 색상과 경계선이 없다,그래서 나타나지 않을 것입하지 않을 경우에 대한 이미지/텍스트

2-버튼 가시성을 없음으로 설정하면 나뭇잎은 공간에서 페이지 렌더링하지 않습니다.에서 볼 수 있습니다 스타일에서 방화?

를 추가하는 경우 이름 특성,그것은 작동하는가?

문제를 가능성이에서 오 단두대 버그.그것은 버그에서 IE6 및 IE7 할 때 발생하는 특정의 혼합물:hover,부유물,레이아웃은 현재(링크를 참조하십시오에 대한 상세정보).내가 믿고 삽입 this:

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

전에 오른쪽 </form> 를 적용하는 다음과 같은 CSS 다:

.clear {clear:both;}

을 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top