2
爲什麼在源代碼中沒有空格時,以下標記會在每個<li></li>
後產生一個空格?如果我將它們全部放在一行上,預覽頁面時空格消失。但爲什麼瀏覽器將我的選項卡看作空格?瀏覽器將代碼中沒有空格的空間
(你可以看到邊框旁的第一個圖像中左側的服務。之間的邊界和服務,是空間,它是不是有圖像2)
<nav>
<ul>
<li><a href="#" class="active">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">LIKE US</a></li>
</ul>
</nav>
這是所有選項卡中刪除:
<nav>
<ul>
<li><a href="#" class="active">HOME</a></li><li><a href="#">SERVICES</a></li><li><a href="#">PRODUCTS</a></li><li><a href="#">ABOUT</a></li><li><a href="#">CONTACT</a></li><li><a href="#">LIKE US</a></li>
</ul>
</nav>
編輯:
瀏覽器是OSX Lion上的Safari 5.1.5。編輯是濃咖啡。還嘗試過TextMate。這是導航的CSS。
nav {
position: relative;
width: 960px;
padding: 0 30px;
background: #281601; /* Old browsers */
background: -moz-linear-gradient(left, #3f2c16 0%, #281601 5%, #281601 95%, #3f2c16 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#3f2c16), color-stop(5%,#281601), color-stop(95%,#281601), color-stop(100%,#3f2c16)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #3f2c16 0%,#281601 5%,#281601 95%,#3f2c16 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #3f2c16 0%,#281601 5%,#281601 95%,#3f2c16 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #3f2c16 0%,#281601 5%,#281601 95%,#3f2c16 100%); /* IE10+ */
background: linear-gradient(left, #3f2c16 0%,#281601 5%,#281601 95%,#3f2c16 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f2c16', endColorstr='#3f2c16',GradientType=1); /* IE6-9 */
font-family: 'Crimson Text', serif;
color: #fff;
}
nav:before {
position: absolute;
left: -12px;
top: 0px;
content: url('../img/nav-left.png');
}
nav:after {
position: absolute;
left: 960px;
top: 0px;
content: url('../img/nav-right.png');
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a, nav ul li a:visited {
display: block;
color: #c7beb4;
text-decoration: none;
font-size: 95%;
letter-spacing: 0.08em;
padding: 12px 20px;
border-right: 1px solid #3b2b18;
}
nav ul li:first-child a:before {
content: url('../img/nav-icon-home.png');
margin: 0px 8px 0 0;
}
nav ul li:first-child a:hover:before {
content: url('../img/nav-icon-home-active.png');
}
nav ul li:last-child {
float: right;
}
nav ul li:last-child a {
border:none;
}
nav ul li:last-child a:before {
content: url('../img/nav-icon-facebook.png');
margin: 0px 8px 0 0;
}
nav ul li:last-child a:hover:before {
content: url('../img/nav-icon-facebook-active.png');
}
nav ul li a:hover {
background: #c7beb4;
color: #281601;
box-shadow: inset 0 0 15px rgba(40,22,1,0.5);
}
你在什麼瀏覽器中看到這種行爲? – idrumgood 2012-04-09 20:02:25
可能重複[如何避免換行符?](http://stackoverflow.com/questions/7185816/how-do-i-avoid-line-break-padding) – Maxpm 2012-04-09 20:03:23
因爲* *之間有*空格元素,新行以及任何縮進標籤/空格。這個空格在HTML中被摺疊成一個空格。 – 2012-04-09 20:04:05