中心的浮动 div 在 IE 中不起作用答案

【问题标题】：Floating div at center doesn't work in IE中心的浮动 div 在 IE 中不起作用
【发布时间】：2011-08-23 00:49:36
【问题描述】：

假设我有闲置的 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 Screen Shot

谢谢！

【问题讨论】：

仅文本，即提交订单...，在我的情况下
也许你应该有一个 jsfiddle.net
在 jsfidle 中，它在 mozila 和 ie 中都可以正常工作。但不知道为什么在我的代码中不工作。你可以在这里看到它..jsfiddle.net/CJgMz

标签： jquery css html alignment

【解决方案1】：

请原谅我这么说，但是……真是一团糟。混合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/

【讨论】：

【解决方案2】：

注意：也请优化您的 CSS，color:red 已被弃用；

看下面的演示

http://jsfiddle.net/2GmC4/

【讨论】：

@diEcho color: red 的哪些内容已被弃用？使用名称而不是十六进制值或rgba()?
@alex 是的，使用十六进制值见文章：w3.org/TR/html4/present/graphics.html#h-15.1.1
@diEcho- 我不知道为什么，但是当我使用你的方法时，它在 IE 中也可见..你能告诉我我的 css 有什么问题吗？接受“颜色：红色”： )
@diEcho 您链接的第一篇文章说bgcolor 属性已被弃用。第二个是钱。 :)
@Vivek 有很多重复的属性，比如align: center等等。请检查自己。谢谢...如果这是有用的答案，请投票并接受..谢谢:)