以下 HTML 代码在 Chrome 中看起来不错,但在 Firefox 中不太好(标题和链接之间的距离与 Chrome 不同)...谁知道如何优化它?
这是它应该长成的样子 (Chromium Screenshot): http://i.imgur.com/R6DZk.png
这是在 Firefox 中的外观: http://i.imgur.com/18SmK.png 以下是 CSS 代码:
这是HTML代码:
但是它的效果不如预期 :/
这是它应该长成的样子 (Chromium Screenshot): http://i.imgur.com/R6DZk.png
这是在 Firefox 中的外观: http://i.imgur.com/18SmK.png 以下是 CSS 代码:
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
background-image: url(background.png);
background-repeat: repeat;
background-position: top left;
}
#main {
font-family: 'Raleway', sans-serif;
position: absolute;
left: 190px;
top: 240px;
font-size: 26px;
}
#title {
position: absolute;
left: 180px;
top: 110px;
font-family: 'Vollkorn', serif;
font-size: 26px;
}
a:link, a:visited {
text-decoration: none;
font-family: 'Raleway', sans-serif;
color: #000000;
}
a:hover {
text-decoration: underline;
}
::-moz-selection {
background: #fe57a1;
color: #fff;
text-shadow: none;
}
::selection {
background: #fe57a1;
color: #fff;
text-shadow: none;
}
这是HTML代码:
这是HTML代码:
<div id="title">
<h1>Title</h1>
</div>
<div id="main">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
我个人认为将标题放入主要的 div 中会更容易:
<div id="main">
<h1>Title</h1>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
然后在CSS中:
h1 { font-family: 'Vollkorn', serif; font-size: 26px; font-weight: bold; }
但是它的效果不如预期 :/