-1

Dreamviewerを使ってWebサイトを制作しました。Web ページに適用したスタイルは、Firefox と IE では使用できません。Web ページはプレーンな HTML 形式で表示されます。しかし、Chrome ではすべてのスタイルが適切に表示されます。その理由と、その問題を解決する方法を教えてください。

これは私のスタイルシートです

*       { padding:0; margin:0; border:0; }

p   {  font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#202020; line-height:180%;}
h1, h2, h3, h4  { color:#00486A; font-family:Arial, Helvetica, sans-serif;}
h1  { padding: 5px 5px 10px 0; font-size:24px;}

#wrapper    { margin:5px auto; width:1000px; background-color:#E6E6FF;} /*opacity:0.8; filter:alpha(opacity=80)}*/
body        { background:url(../img/backgrounds/sparkling_design-HD.jpg); background-repeat:repeat; }
#logo       { float:left; margin:10px 5px 10px 20px; opacity:1; ;}
#logo img   { opacity:1;}


#loginform  { float:right; padding: 20px 30px 10px 10px; margin: 10px 10px; }
#loginform a    { float:right; clear:both; }
#loginform a:link       { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:visited    { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:active     { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:hover      { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; text-decoration:none; text-decoration:underline;}
#loginform a:focus      { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform label    { float:left; width:70px; line-height: 100%; font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; padding-top:5px;}
#loginform input    { -webkit-border-radius:5px; border-radius:5px; width:150px; line-height:180%; height:20px; margin-bottom:10px; padding-right:5px; border:1px solid #999; padding-left: 8px;}
#loginform input[type=submit]   { float:right; text-align:center; width:75px; background-color:#82BDFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-left:8px; border: 1px #999999 solid; line-height:10px;}
#loginform input[type=submit]:hover { background-color:#0060FF; color:#FFF; }

#topnav     { clear:both; padding:10px 5px 10px 5px; margin:5px 5px 5px 20px; border-top:1px #B7B1FE solid; border-bottom:1px #B7B1FE solid;}
#topnav ul li { display:inline; list-style-type:none; padding-left:20px; }
#topnav ul li a:link    { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:active  { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:visited { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:hover   { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#7C96FC; font-weight:bold; }
#topnav ul li a:focus   { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }

#banner { clear:both; margin:5px 20px; width:960px;}
#banner img { padding: 10px 0 10px 15px; }

#content    { float:left; width:700px; padding:10px 20px 10px 10px; margin:5px 5px 10px 10px; text-align:justify;}
#rightpane  { float:right; width:220px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#202020; margin-right: 20px; background-color:#D9DDFF; margin-bottom:20px; border:1px #0080C0 solid; border-radius:5px;}

#searchbox  { padding:10px 5px 10px 20px; margin-top:5px; }
#search input[type=text]    { border-radius:5px; -webkit-border-radius:5px; height: 20px; width:150px; border:1px #0080C0 solid; margin-right: 5px; }
#search input[type=submit]  { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; height:25px; width:30px; border:1px #0080C0 solid; background-color:#82BDFF; line-height:5px;}
#search input[type=submit]:hover    { background-color:#0060FF; color:#FFF; }
#searchbox h3   { margin-left:0; }

/*---------------------Signup page------------ */
#form-content   { border: 1px solid #666; float:left; width:690px; padding:10px 20px 10px 10px; margin:5px 15px 10px 20px; }
#form-add-account input[type=text], #form-add-account input[type=password]  { width: 200px; height:20px; border-radius:5px; border: 1px #0080C0 solid;}
#form-add-account label { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
#form-add-account table { padding-top: 5px; }
/*---------------------------------------------*/


#latest-posts   { padding:10px 5px 10px 10px; margin:20px 0; }
#latest-posts ul    { list-style-type:none; padding-right:5px; padding-left:10px; line-height: 180%;}
#latest-posts ul li a:link      {  text-decoration:none; color:#202020;}
#latest-posts ul li a:active    {  text-decoration:none; color:#202020;}
#latest-posts ul li a:visited   {  text-decoration:none; color:#202020;}
#latest-posts ul li a:hover     {  text-decoration:none; color:#7C96FC; text-decoration:blink;}
#latest-posts ul li a:focus     {  text-decoration:none; color:#202020;}

#recommendations    { padding:10px 5px 10px 10px; margin:20px 0; }
#recommendations ul { list-style-type:none; padding-right:5px; padding-left:10px;}
#recommendations ul li a:link       {  text-decoration:none; color:#202020;}
#recommendations ul li a:active {  text-decoration:none; color:#202020;}
#recommendations ul li a:visited    {  text-decoration:none; color:#202020;}
#recommendations ul li a:hover      {  text-decoration:none; color:#7C96FC; text-decoration:blink;}
#recommendations ul li a:focus      {  text-decoration:none; color:#202020;}

#footer     { clear:both; width:980px; margin:10px auto; border-top:2px #CCCCCC dotted; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666;}
#footer p   { font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666; }
#footer h4  { font-size:11px; padding-bottom:4px; }

#social-media   { float:left; width:230px; margin:10px 0px 10px 30px;}
#social-media ul    {  list-style-type:none; line-height:180%;}
#social-media ul li a:link      {  text-decoration:none; color:#666;}
#social-media ul li a:active        {  text-decoration:none; color:#666;}
#social-media ul li a:visited   {  text-decoration:none; color:#666;}
#social-media ul li a:hover     {  text-decoration:none; color:#7C96FC; text-decoration:blink;}
#social-media ul li a:focus     {  text-decoration:none; color:#666;}

#contacts   { float:left;width:230px; margin:10px 0px 10px 120px; }
#notice     { width:230px; float:right; margin-top:10px; }
#footer-bottom      {  clear:both; text-align:center; padding:10px 10px 20px 10px; border-top:2px #CCCCCC dotted; }
4

1 に答える 1

1

高度なまたは複雑な CSS コードは表示されないため、最新のブラウザーはすべてそれをサポートする必要があります。とにかく、ここにチェックリストがあります：

チェックリスト

  • さまざまなブラウザー バージョンを確認しましたか (Internet Explorer 内で古いバージョン間で切り替えることができます)。チェック: http://msdn.microsoft.com/en-us/library/gg699485(v=vs.85).aspx
  • より単純化された CSS を試しましたか?
  • ブラウザのキャッシュをクリーンアップしましたか?
  • 「ブラウザ スニッフィング」は試しましたか？チェック: http://en.wikipedia.org/wiki/Browser_sniffing
  • 別のコンピューターで試しましたか？

オンラインでテストする場合は、.htaccess.

于 2013-05-02T21:06:22.560 に答える