0
私は新しいプロジェクトに取り組んでいます。オペラとIEが私のli要素に余分なスペースを与えているようです。Operaは配置時にリストの下に余分なスペースを追加します
<!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>
<style type="text/css">
@import "stil.css";
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="reel.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savic</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<p> Samostalna Zanatska Radnja</p>
<a id="logo" href="index.html">Savić</a>
<div id="darrow">
</div>
<div id="darrow2">
</div>
<ul id="nav">
<li><a class="link" style="background:url(images/activeb.jpg) repeat-x" href="#">Početna</a></li>
<li><a class="link" id="izb" href="#">Izrada</a></li>
<li><a class="link" id="ugb" href="#">Ugradnja</a></li>
<li><a class="link" href="#">Galerija</a></li>
<li><a class="link" href="#">Kontakt</a></li>
</ul>
<ul id="izd">
<li><a href="#">Ograda</a></li>
<li><a href="#">Kapija</a></li>
<li><a href="#">Gelendera</a></li>
<li><a href="#">Čelične konstrukcije</a></li>
<li><a href="#">Garažnih vrata</a></li>
</ul>
<ul id="ugd">
<li><a href="#">Kupatila</a></li>
<li><a href="#">Vodovoda</a></li>
<li><a href="#">Kanalizacije</a></li>
<li><a href="#">Grejanja</a></li>
<li><a href="#">Servis pumpi za vodu</a></li>
</ul>
</div>
</div>
<div id="body">
<!-- ALL STUFF GOES HERE -->
<div id="holder">
<!-- LEVI DIV -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="left">
<div id="portfolio_cycler" class="shadow roundbox">
<img class="active" src="images/reel1.jpg" />
</div>
<div id="circles"></div>
<img id="horg" src="images/horg.jpg" />
<div id="topt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque semper ligula at volutpat. In hac habitasse platea dictumst. Nam ultrices diam eu dolor cursus in semper ligula faucibus. Nulla mattis tortor vel nunc rutrum convallis. Maecenas egestas diam sit amet odio mattis sit amet pellentesque orci bibendum. Ut sodales fringilla sem, nec volutpat mi scelerisque non. Phasellus luctus laoreet nunc, eget tincidunt massa egestas vel. Phasellus id sapien ante. Fusce vulputate, urna quis condimentum molestie, erat sapien porttitor dui, eu pulvinar orci enim non massa. Mauris in cursus mauris. Sed tortor justo, placerat tristique blandit at, rutrum quis nisi.</p>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- LEVI DIV KRAJ -->
</div>
<!-- ALL STUFF ENDS HERE -->
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/*NEOPHODNO ZA FOOTER */
/*<div id="container">
<div id="header">
<div id="menu">
</div>
</div>
<div id="body">
Sve stavljati u body, kao i margin: 0 auto, ne treba wrap div
</div>
<div id="footer"></div>
</div>
*/
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:url(images/background.jpg) repeat-x;
height:100px;
}
#body {
width:980px;
margin:0 auto;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
background:url(images/footer.jpg) repeat-x;
}
#wrap{
width:980px;
margin:0 auto;
background:#000;
height:100px;
}
/* FOOTER PODESAVANJA */
#menu{
width:980px;
margin:0 auto;
position:relative;
top:2px;
height:98px;
background:url(images/header2.jpg) 0px 0px;
}
#holder{
width:960px;
position:relative;
left:10px;
top:10px;
}
#menu p,a,li{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
position:relative;
}
#menu p{
font-size:12px;
left:55px;
top:10px;
width:200px;
}
#logo{
font-size:40px;
top:5px;
left:80px;
text-decoration:none;
}
#nav li{
font-size:12px;
display:inline;
}
#nav ul{
position:relative;
height:20px;
}
#nav{
position:relative;
top:10px;
left:0px;
}
#nav a{
font-size:12px;
padding-right:14px;
padding-left:14px;
}
.link{
padding-top:5px;
padding-bottom:5px;
text-decoration:none;
top:1px;
}
#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#circles{
position:absolute;
z-index:7;
top:250px;
left:690px;
}
#izd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:60px;
height:120px;
}
#ugd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:146px;
height:120px;
}
#izd li, #ugd li{
list-style:none;
padding-top:3px;
padding-bottom:5px;
}
#izd a, #ugd a{
text-decoration:none;
display:block;
width:130px;
}
#izb{
visibility:visible;
}
#darrow{
position:absolute;
left:130px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#darrow2{
position:absolute;
left:214px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#horg{
position:relative;
top:277px;
}
#topt{
position:relative;
width:770px;
top:283px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
私は特別なCSSを作成したり、これを修正するためにJavaScriptを使用したくないので、誰もが問題だものを私に伝えることができます。私はid navが問題を引き起こすと思うが、私は確信していない。
で私のチュートリアルをチェックしてください。[JS Bin]（http://jsbin.com/）で問題を再現できますか？私はそうしようとしましたが、私は問題が何かを見ることができません：http://jsbin.com/urosoh – thirtydot
@thirtydotここにあります：http：//jsfiddle.net/xuBwZ/1/ ご覧のとおり...緑のボックスと赤いボックスの間のギャップはChrome/FirefoxとOpera/IEでは同じではありません。 Operaは私のポジショニングに1〜2個の追加ピクセルを追加しています。もちろん、画像を背景色に置き換えると、これは悪く見えません。この例のように、画像ではデザインがぼやけます。 – Mentalhead