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 に答える