css 背景位置在 IE 7 和 8 中不起作用

发布于 2024-12-14 23:05:00 字数 1378 浏览 0 评论 0 原文

该页面在 FF、Chrome 等中渲染效果很好。但是在 IE 7 和 8 中,作为背景图像的闭合“X”不会对齐。有什么想法吗?我尝试设置 background-position 等。

我的代码:

.startup-container
{
  width: 455px;
}

.close-startup-home 
{
  background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
  float: right;
  height: 52px;
  width: 60px;
}

.menu-outer
{
  background: #545454;
  -moz-border-radius:5px; 
  border-radius:5px;
  -moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);

}

.menu-inner
{
  background: #3f3f3f;
  -moz-box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
  -moz-border-radius:5px; 
  border-radius:5px;
}

.startup-box
{
  width:439px;
  line-height:20px;
  text-align: center;
  color:#fff;
  padding-top:5px;
  padding-bottom:5px;
}

.startup-box-inner
{
  width:389px; 
  height:99px;
  padding:20px;
  margin-left:5px;
  margin-right:5px;
}
<div class="startup-container">
  <div class="close-startup-home"></div>
  <div class="menu-outer startup-box">
    <div class="menu-inner startup-box-inner"></div>
  </div>
</div>

This page renders great in FF, Chrome, etc.. However in IE 7 and 8, the close "X" which is a background image does not line up. Any ideas? I tried to set the background-position etc..

The code I have:

.startup-container
{
  width: 455px;
}

.close-startup-home 
{
  background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
  float: right;
  height: 52px;
  width: 60px;
}

.menu-outer
{
  background: #545454;
  -moz-border-radius:5px; 
  border-radius:5px;
  -moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);

}

.menu-inner
{
  background: #3f3f3f;
  -moz-box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
  -moz-border-radius:5px; 
  border-radius:5px;
}

.startup-box
{
  width:439px;
  line-height:20px;
  text-align: center;
  color:#fff;
  padding-top:5px;
  padding-bottom:5px;
}

.startup-box-inner
{
  width:389px; 
  height:99px;
  padding:20px;
  margin-left:5px;
  margin-right:5px;
}
<div class="startup-container">
  <div class="close-startup-home"></div>
  <div class="menu-outer startup-box">
    <div class="menu-inner startup-box-inner"></div>
  </div>
</div>

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

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

发布评论

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

评论(1

屋檐 2024-12-21 23:05:00

为包含关闭按钮的 div 指定一个 position:absolute 并根据该位置进行定位。

.startup-container {
    width: 455px;
    position: relative
}

.close-startup-home {
    background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
    float: right;
    height: 52px;
    width: 60px;
    position: absolute;
    right: 0; 
}

Give a position: absolute to your div containing the close button and position it according to that.

.startup-container {
    width: 455px;
    position: relative
}

.close-startup-home {
    background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
    float: right;
    height: 52px;
    width: 60px;
    position: absolute;
    right: 0; 
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文