0
학습 목적으로 웹 페이지를 복제하려고하는데,이 테이블의 아래쪽 테두리가 표시되지 않습니다. 나는 그것이 상단 섹션의 끝 부분에 겹쳐지는 하단 섹션과 관련이 있다고 생각한다. (방화범이 끌리지는 않지만) 그러나 나는 그것을 고치는 법을 모른다. 또한 국경은 Chrome에서도 문제없이 표시됩니다.아래쪽 경계선이 Firefox에 표시되지 않습니다.
파이어 폭스 
크롬 
정확히 왜 이런 일이 무엇입니까? 어떻게 해결할 수 있습니까?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Beach Boys</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/beach.css" />
</head>
<body>
<!-- HEADER -->
<header>
<img class="left-logo" src="assets/images/logo02.gif" alt="George Starostin Reviews" />
<img class="right-logo" src="assets/images/logo01.gif" alt="Only Solitaire" />
<table>
<tr>
<td><a href="#" >Main Index Page</a></td>
<td><a href="#" >General Ratings Page</a></td>
<td><a href="#" >Rock Chronology Page</a></td>
<td><a href="#" >Song Search Page</a></td>
<td><a href="#" >New Additions</a></td>
<td><a href="#" >Message Board</a></td>
</tr>
</table>
</header>
<!-- INFO -->
<section class="info" >
<h1>THE BEACH BOYS</h1>
<p><cite>"I'm pickin' up good vibrations"</cite></p>
<img src="assets/images/bb_info.jpg" alt="The Beach Boys" />
<p class="p-rank" >Class <span class="rank" >C</span></p>
<table>
<tr>
<th>Main Category</th>
<td><a href="#" >Lush Pop</a></td>
</tr>
<tr>
<th class="also">Also Applicable</th>
<td><a href="#" >Pop Rock</a>, <a href="#" >Art Rock</a></td>
</tr>
<tr>
<th>Starting Period</th>
<td><a href="#" >The Early Years</a></td>
</tr>
<tr>
<th class="also" rowspan="2" ><br /> <br /> Also active in</th>
<td rowspan="3" >
<a href="#" >The Psychedelic Years</a>, <a href="#" >The Artsy/Rootsy Years</a>, <br />
<br />
<a href="#" >The Interim Years</a>, <a href="#" >The Punk/New Wave Years</a>, <br />
<br />
<a href="#" >The Divided Eighties</a>
</td>
</tr>
</table>
</section>
<!-- BOOKMARKS -->
<section class="intro">
<a href="#intro">Introduction</a>
<p>ALBUM REVIEWS: </p>
<ul>
<li>1962: <a href="#">Surfin' Safari</a></li>
<li>1963: <a href="#">Surfin' USA</a></li>
<li>1963: <a href="#">Surfer Girl</a></li>
<li>1963: <a href="#">Little Deuce Coupe</a></li>
<li>1964: <a href="#">Shut Down Vol. 2</a></li>
<li>1964: <a href="#">All Summer Long</a></li>
<li>1964: <a href="#">Concert</a></li>
<li>1965: <a href="#">Today!</a></li>
<li>1965: <a href="#">Summer Days (And Summer Nights)</a></li>
<li>1965: <a href="#">Party!</a></li>
<li>1966: <a href="#">Pet Sounds</a></li>
<li>1967: <a href="#">Smiley Smile</a></li>
<li>1967: <a href="#">Wild Honey</a></li>
<li>1968: <a href="#">Friends</a></li>
<li>1968: <a href="#">Stack-O-Tracks</a></li>
<li>1969: <a href="#">20/20</a></li>
<li>1970: <a href="#">Live in London</a></li>
<li>1970: <a href="#">Sunflower</a></li>
<li>1971: <a href="#">Surf's Up</a></li>
<li>1972: <a href="#">Carl And The Passions/So Tough</a></li>
<li>1973: <a href="#">Holland</a></li>
<li>1973: <a href="#">In Concert</a></li>
<li>1976: <a href="#">15 Big Ones</a></li>
<li>1977: <a href="#">Love You</a></li>
<li>1978: <a href="#">M.I.U. Album</a></li>
<li>1979: <a href="#">L.A. (Light Album)</a></li>
<li>1980: <a href="#">Keepin' The Summer Alive</a></li>
<li>1985: <a href="#">The Beach Boys</a></li>
</ul>
</section>
<!-- INTRO -->
<section>
</section>
<!-- REVIEWS -->
<section>
</section>
<!-- FOOTER -->
<footer>
</footer>
</head>
</html>
CSS
/*
==============================
CSS Reset
==============================
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
==============================
General
==============================
*/
body {
background-color: rgb(128, 255, 128);
}
p {
margin: 10px;
}
th, td {
border: 1px solid black;
border-top-color: gray;
border-left-color: gray;
padding: 5px 3px;
}
cite {
font-style: italic;
}
/*
==============================
Header
==============================
*/
header {
border-bottom: 1px solid black;
margin: 10px auto 0 auto;
padding: 0 10px;
overflow: auto;
}
header table {
font-size: 13px;
margin-left: auto;
margin-right: auto;
}
header .left-logo {
width: 150px;
float: left;
}
header .right-logo {
width: 200px;
height: 35px;
float: right;
}
/*
==============================
Info
==============================
*/
.info {
width: 960px;
text-align: center;
margin: 10px auto;
}
h1 {
color: rgb(255, 0, 0);
font-size: 48px;
font-weight: bold;
text-decoration: underline;
padding: 10px;
}
.info cite {
font-size: 13px;
}
.info img {
width: 466px;
}
.p-rank {
font-size: 24px;
}
.rank {
color: rgb(0, 0, 255);
font-weight: bold;
}
.info p {
padding: 10px;
}
.info table {
display: inline-block;
text-align: left;
}
.info table th {
font-weight: bold;
}
.info .also {
font-style: italic;
font-weight: normal;
}
/*
==============================
Bookmarks
==============================
*/
.intro ul {
list-style-type: circle;
}
후 당신의 HTML 여기에 CSS –
그런데 왜 :
으로? – Jovito
링크가 더 이상 필요 없으면 참조 코드 –