在IE8中分配底部属性时的位置固定问题

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
}

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

有关更多信息，请参见此处：链接

编辑

您的html无效：

尝试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lte IE 8 ]>
    <html xmlns="http://www.w3.org/1999/xhtml" class="ie_8">
<![endif]-->
<!--[if (gt IE 8)|(!IE)]><!-->
    <html xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<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 个解决方案

解决方案1
1 已采纳 2013-01-09 12:57:56

解决方案2
0 2013-01-09 12:55:46

解决方案3
0 2013-01-09 12:58:18

在IE8中分配底部属性时的位置固定问题

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-01-09 12:57:56

解决方案2 0 2013-01-09 12:55:46

解决方案3 0 2013-01-09 12:58:18

解决方案1
1 已采纳 2013-01-09 12:57:56

解决方案2
0 2013-01-09 12:55:46

解决方案3
0 2013-01-09 12:58:18