사라지는 제출 버튼 IE7
-
22-07-2019 - |
문제
인사드립니다.나는 데 문제는 다음과 같은 기존 코드입니다.그것은 환경에서는 좋은 제외한 모든 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;}
을 것입니다.