中心浮动 div 在 IE 中不起作用

发布于 2024-11-06 01:25:28 字数 961 浏览 0 评论 0原文

假设我有下面的html -

    <div  id="submitPage" align="center" >
<div id="middlecontainer">
<p align="center" id="loading-image">&nbsp;<img  src="/cso/images/loading.gif" border="0" > <font color="red" >Submiting order...</font></p>
</div>
</div>

我正在尝试将submitPage div浮动在页面中心...我已经使用了下面的css并且它在Mozila中工作正常，但不知道为什么它在IE-8中不起作用..

#submitPage {
 border: 1px solid black;
 width: 746px;
 height:201px;
 background: aqua; 
 text-align: center;
 z-index: 99;
 position: fixed;
 display: block;
 margin:90px auto;
}
#middlecontainer{
 text-align: center;
 width: 91px;
margin: 0 327px;
}
#loading-image {
  position: absolute;
  top: 74px;
  left: 299px;
  z-index: 100;
}

请让我现在，如果我做错了什么或缺少一些需要为 IE 添加的内容。任何使用 Jquery 来完成此操作的方法也将受到赞赏。

Mozila 屏幕截图

谢谢。！

原文

let's say i have fallowing html-

    <div  id="submitPage" align="center" >
<div id="middlecontainer">
<p align="center" id="loading-image"> <img  src="/cso/images/loading.gif" border="0" > <font color="red" >Submiting order...</font></p>
</div>
</div>

i am trying to float submitPage div at center of page...i ahve used fallowing css and it's working fine in Mozila but don't know why it's not working in IE-8..

#submitPage {
 border: 1px solid black;
 width: 746px;
 height:201px;
 background: aqua; 
 text-align: center;
 z-index: 99;
 position: fixed;
 display: block;
 margin:90px auto;
}
#middlecontainer{
 text-align: center;
 width: 91px;
margin: 0 327px;
}
#loading-image {
  position: absolute;
  top: 74px;
  left: 299px;
  z-index: 100;
}

Please let me now if i am doing something wrong or missing something which needs to be added for IE.Any way to doing it by using Jquery will also be appreciated.

Mozila Screen Shot

Thanks.!

分享到QQ

分享到微博

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

发布评论

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

呆橘 2024-11-13 01:25:28

请原谅我这么说，但是……真是一团糟。混合 HTML 属性和 CSS，居中、居中、居中。并居中。和字体标签。以及居中...

您应该避免为包含块元素的元素指定居中文本，因为 IE 会错误地处理该问题，并将居中应用于块元素，而不仅仅是文本。

由于您只是在元素中放置一些文本和图像，因此您只需要元素、图像和文本：

<div  id="submitPage">
  <img src="/cso/images/loading.gif" alt="">Submitting order...
</div>

#submitPage {
  border: 1px solid black;
  width: 746px;
  height: 201px;
  background: #0ff; 
  z-index: 99;
  position: fixed;
  left: 50%;
  top: 90px;
  margin-left: -373px;
  line-height: 201px;
  text-align: center;
  color: #f00;
}
#submitPage img{
  margin-right: 10px;
  border: none;
}

演示： http://jsfiddle.net/pkMqM/

Excuse me for saying so, but... what a mess. Mixing HTML attributes and CSS, centering, centering and centering. And centering. And font tags. And centering...

You should avoid to specify centered text for an element that contains block elements, because IE handles that incorrectly and applies the centering on block elements, not only the text.

As you are just placing some text and an image in an element, you only need the element, the image, and the text:

<div  id="submitPage">
  <img src="/cso/images/loading.gif" alt="">Submitting order...
</div>

#submitPage {
  border: 1px solid black;
  width: 746px;
  height: 201px;
  background: #0ff; 
  z-index: 99;
  position: fixed;
  left: 50%;
  top: 90px;
  margin-left: -373px;
  line-height: 201px;
  text-align: center;
  color: #f00;
}
#submitPage img{
  margin-right: 10px;
  border: none;
}

Demo: http://jsfiddle.net/pkMqM/

回复收藏 0 原文