Question

我创建了一个聊天应用程序，我将与聊天应用程序相关的父div保留为position:fixed。这是摘录代码：

#chat-outline
{
    background-color: gray;
    width: 16%;
    height: 45%;
    min-height: 300px;
    min-width: 200px;
    max-height: 450px;
    max-width: 300px;
    position: fixed;
    bottom: 25px;  //even tried by giving 'em', no use
    right: 10px;
    padding: 2px;
}

问题是在IE8中，我需要为bottom属性赋予更多价值，使其完全可见（下面的部分正在减少）。如果我这样做，在Chrome中，聊天应用程序将比平时更加重要。

对此有任何解决方法吗？

我在asp.net中这样做，所以没有必要担心doctype。（因为它提供了模板）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

编辑：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
   <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
   <script src="JSfiles/file.js" type="text/javascript"></script>
   <link href="Styles/style.css" rel="stylesheet" type="text/css" />
   <!--[if lte IE 8 ]><html class="ie_8"><![endif]-->
     <!--[if (gt IE 8)|(!IE)]><!-->
        <html>
    <!--<![endif]-->
</head>
<body>
    <div id="#chat-outline"></div>
</body>
</html>

Answer 1

为IE8添加条件HTML类。将您的<html>标记更改为此

<!--[if lte IE 8 ]><html class="ie_8"><![endif]-->
<!--[if (gt IE 8)|(!IE)]><!-->
<html>
<!--<![endif]-->

然后在你的CSS中有这个

.ie_8 #chat-outline {
    bottom: 25px  //OR whatever it needs to be
}

这意味着增加的底部不会影响任何其他浏览器：

有关详细信息，请参阅此处：Link

修改

您的HTML无效：

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">  <head id="Head1" runat="server"> <title></title> <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="JSfiles/file.js" type="text/javascript"></script> <link href="Styles/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="#chat-outline"></div> </body> </html>

Answer 2

您是否尝试重置文档填充和边距？

CSS：

html, body {
   margin: 0;
   padding: 0;
}

Answer 3

<!--[if gt IE 7]>
    <style>
    div {
       bottom: /* as you want */;
    }
    </style>
<![endif]-->

在IE8中分配底层属性时定位问题

3 个答案: