0

我创建了一个聊天应用程序，我将与聊天应用程序相关的父 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>
4

3 回答 3

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>
于 2013-01-09T12:57:56.627 回答
0

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

CSS：

html, body {
   margin: 0;
   padding: 0;
}
于 2013-01-09T12:55:46.650 回答
0 
<!--[if gt IE 7]>
    <style>
    div {
       bottom: /* as you want */;
    }
    </style>
<![endif]-->
于 2013-01-09T12:58:18.617 回答