样式搜索栏在 IE7 中完全消失

发布于 2024-10-01 13:03:05 字数 1266 浏览 2 评论 0原文

我在这个网站这里设计了一个搜索栏,

它在IE7中完全消失(我不需要支持IE6)。 它在我迄今为止测试过的任何其他浏览器(Chrome、IE8、Safari、Firefox、Opera)中都能正常工作。

我尝试删除并重新添加 CSS 属性,但没有成功

HTML

<div id="access-search">
   <form id="searchform" method="get" action="http://eezzyweb.com">
      <div>
         <input id="s" name="s" type="text" value="" size="20" tabindex="1" />
         <label for="s">
            <input id="searchsubmit" name="searchsubmit" type="submit" value="Search" tabindex="2" />
         </label>
      </div>
   </form>
</div>

CSS

#searchform div{
position:relative;
float:right;
display:inline;
top:6px;
right:10px;
width:250px;
height:22px;
background:url(images/search-bkg-complete.png) 0 0 no-repeat;
}
input#s{
position:relative;
width:210px;
height:16px;
margin-left:5px;
background:none;
padding:3px 0;
}
#searchsubmit {
background:url(images/submit-button.png) 0 2px no-repeat;
float:right;
width:22px;
height:21px;
text-indent:-9999px;
text-transform:capitalize;
}
input#s, #searchsubmit{
vertical-align:middle;
border:0;
line-height:1;
font-size:90%;
}
#searchsubmit:hover{
cursor:pointer;
}

I styled a search bar on this site here

It disappears completely in IE7 (I do not need to support IE6).
It works fine in any other browser I tested it so far (Chrome, IE8, Safari, Firefox, Opera).

I tried to remove and re-add CSS properties without success

HTML

<div id="access-search">
   <form id="searchform" method="get" action="http://eezzyweb.com">
      <div>
         <input id="s" name="s" type="text" value="" size="20" tabindex="1" />
         <label for="s">
            <input id="searchsubmit" name="searchsubmit" type="submit" value="Search" tabindex="2" />
         </label>
      </div>
   </form>
</div>

CSS

#searchform div{
position:relative;
float:right;
display:inline;
top:6px;
right:10px;
width:250px;
height:22px;
background:url(images/search-bkg-complete.png) 0 0 no-repeat;
}
input#s{
position:relative;
width:210px;
height:16px;
margin-left:5px;
background:none;
padding:3px 0;
}
#searchsubmit {
background:url(images/submit-button.png) 0 2px no-repeat;
float:right;
width:22px;
height:21px;
text-indent:-9999px;
text-transform:capitalize;
}
input#s, #searchsubmit{
vertical-align:middle;
border:0;
line-height:1;
font-size:90%;
}
#searchsubmit:hover{
cursor:pointer;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

冷夜 2024-10-08 13:03:05

哈哈...我解决了。父容器上存在溢出:隐藏!

Lol...I solved it. There was an overflow:hidden on a parent container!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文