html - さまざまなブラウザーでレイアウトが適切にレンダリングされない

Question

私はウェブサイトのレイアウトを作っています。とにかくまだ開発中ですが、Google Chrome と Opera では十分に表示されますが、Firefox と Internet Explorer では表示されません。Chrome では問題ないように見えますが、ポジショニングが正しく行われていない可能性があります。修正するのを手伝ってもらえますか?

HTML 本文

<div id="wrapper">
<header id="top-header">
<div id="logo1">
scritta
<img src="CS-G-100.png" class="logo" />
</div>
<nav id="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pulsante2</a></li>
<li><a href="#">Pulsante3</a></li>
<li><a href="#">Pulsante4</a></li>
<li><a href="#">Pulsante5</a></li>
</ul>
</nav>
<div id="kenburns" class="slideshow">
    <img src="images/1.jpg" alt="1">
</div>
</header>
<section id="main-section">
<aside id="left">
</aside>
<article id="main-content">
</article>
<aside id="right">
</aside>
<footer id="the-footer">
<div id="center-footer">
Centro fisioterapico San Giusto Via Romana Est 78/2 Porcari p. iva : 01532540463
</div>
</footer>
</section>
</div>

CSS

body {

width:100%;
margin:18px 20px 20px 20px;
display: box;                     /* As specified */
display: -moz-box;                /* Mozilla */
display: -webkit-box;             /* WebKit */
box-pack: center;                  /* As specified */
-moz-box-pack: center;             /* Mozilla */
-webkit-box-pack: center;          /* WebKit */
background-attachment: fixed;
background-image: url(sfondo-6.png);
background-repeat: repeat;
}

#wrapper {
border: 1px solid black;
width:1024px;
height:768px;
padding: 20px;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1)  100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color- stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */

}
#top-header {
position:absolute;
width:1022px;
height:234px;
display:block;
border:1px solid black; 
z-index:1;
background-color:#d2e5e3;
}

#top-nav {
position:relative;
width:700px;
display:block;
border:1px solid black;
top:-119px;
right:-321px;
z-index:2;
background-color:#d2e4e8;
}

#top-nav li {
display: inline;
/* Align children to the horizontal center of this box */
box-align: center;              /* As specified */
-moz-box-align: center;         /* Mozilla */
-webkit-box-align: center;      /* WebKit */
list-style:none;
text-align:center;
width:120px;
height:25px;
background:#5DBCD2;
opacity:0.7;
border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
transition:transform 2s, opacity 2s, background 2s;
-webkit-transition::transform 2s, opacity 2s, background 2s;
-moz-transition:transform 2s, opacity 2s, background 2s;
-o--transform 2s, opacity 2s, background 2s;
}

#top-nav-li:hover {
transform-rotate:(360deg);
-webkit-transform:(360deg);
-moz-transform:rotate(360deg);
opacity:1px;
background:#0F3;
}

#top-nav li {
display:inline-block;   
}

#left-nav {
position:absolute;
border:1px solid black;
padding:0px;
left:0px;
top:0px;
z-index:2;
text-decoration:none;


}

#left-nav ul {
position:relative;
left:0px;
display:block;  
}

#left-nav li {
margin:0px opx 10px 0px;
display:block;
position:relative;
border-radius:0px 10px 0px 10px;
-webkit-border-radius:0px 10px 0px 10px;
-o-border-radius:0px 10px 0px 10px;
-moz-border-radius:0px 10px 0px 10px;
-ms-border-radius:0px 10px 0px 10px;
background-color:#9ED09D;
transition:opacity 2s;
-moz-transition:opacity 2s;
-o-transition:opacity 2s;
-webkit-transition:opacity 2s;
}

#left-nav li:hover {
opacity:1;  
}


#left {
position:relative;
float:left;
border: 1px solid black;
padding: 20px;
width:256px;
height:620px;

}

#right {
float:left;
border: 1px solid black;
padding:20px;
width:256px;
height:620px;
}


#main-content {
float:left;
border: 1px solid black;
padding:20px;
width:386px;
height:620px;
}

#the-footer {
display:table;
clear:both;
width:100%;
height:50px;
border:1px solid black;
}

#rollover {
position:relative;
top:-112px;
left:490px;
border:1px solid black;
width:500px;
height:200px;
background-color:#FFFFFF;

}

#logo1{
position:relative;
top:47px;
left:20px;
}

.logo {

}

.center-text {
vertical-align:middle;
text-align:center;  
}

#center-footer {
display:table-cell;
vertical-align:middle;
text-align:center;
margin:0px auto;
}

これは、Google Chrome でどのように表示されるかのスクリーンショットです: (3 つの最適なレンダリング) グーグルクローム

これは、Firefox での表示方法のスクリーンショットです。ここに画像の説明を入力

これは、Internet Explorer での表示方法のスクリーンショットです: (firefox よりは優れていますが、Google Chrome のように中央に配置されていません)。

ここに画像の説明を入力

私はあなたにjfiddleを与えます：

ここにコードがあります：

http://jsfiddle.net/Gwpbk/

そして、ここに全画面表示があります：

http://jsfiddle.net/Gwpbk/embedded/result/

よろしくお願いします。

score 1 · Accepted Answer

CSS に実装する必要がある微調整がおそらくいくつかあります。しかし、あなたは同じような問題に何度も直面するので、この正確な問題の解決策だけを提供するのは良い考えではないと思います. おそらくあなたが予想するよりも早く。

CSS は複雑なテーマです。それを学ぼうとしている間は、CSS リセットを使用することをお勧めします。

すべてのブラウザには、さまざまな html 要素をレンダリングするためのデフォルトの CSS スタイルがあり、これらのルールは通常、ブラウザによって異なります。

CSS リセットは、ブラウザー間の違いを最小限に抑えようとする CSS ルールのセットです。これにより、独自の CSS を追加したときに、より類似したエクスペリエンスがもたらされます。Normalize.cssを確認することをお勧めします。Html5Boilerplate.comを見てみると、どちらか害を及ぼすことになります。

html - さまざまなブラウザーでレイアウトが適切にレンダリングされない

1 に答える 1

Related

Reference