일부 브라우저에서 탐색 표시 줄에 결함이 있음

나는 실제로 쉽게 풀 수있는 문제로 고심하고 있지만 CSS에 대한 많은 경험이 없기 때문에 도움을 요청하기로 결정했습니다.일부 브라우저에서 탐색 표시 줄에 결함이 있음

Safari, Chrome 및 Firefox의 최신 버전으로 테스트했을 때 내 웹 사이트의 탐색 바가 정상적으로 작동했지만 일부 버전에서는 약간의 결함이있는 것으로 보입니다. 스마트 폰에서도 문제는 어디서나 동일합니다. 탐색 줄의 오른쪽 끝에있는 흰색 선. 어떻게 수정해야합니까? 또한 일부 브라우저에서는 탐색 줄의 마지막 단추가 첫 번째 단추 아래로 이동했습니다 (다음 줄에 있음). 여기 Screenshot of the problem here.

는 CSS 파일입니다

<style type="text/css"> #Container {} #container { 
    font-family: Arial; 
    width: 804px; 
    background: #fafafa; 
    border-radius: 1px; 
    border: 3px solid #000; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 10px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 6px; 
} 
body { 
    background-image: url("img/bg-light.png") 
} 
.header { 
    height: auto; 
    width: 850px; 
} 
#nav li { 
    float: left; 
} 
#nav { 
    font-family: Arial; 
    width: 850px; 
    margin: 0 auto; 
    padding: 0; 
    list-style: none; 
    background-color: #fafafa; 
} 
#nav li a { 
    display: block; 
    padding: 10px 38.4px; 
    text-decoration: none; 
    background-color: #000; 
    color: #FFF; 
} 
#nav li a:hover { 
    color: #000; 
    background-color: #fadd75; 
} 
.tabel { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    border: 1px solid #000000; 
} 
.tabel table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
.tabel tr:last-child td:last-child { 
    border-bottom-right-radius: 0px; 
} 
.tabel table tr:first-child td:first-child { 
    border-top-left-radius: 0px; 
} 
.tabel table tr:first-child td:last-child { 
    border-top-right-radius: 0px; 
} 
.tabel tr:last-child td:first-child { 
    border-bottom-left-radius: 0px; 
} 
.tabel tr:nth-child(odd) { 
    background-color: #fadd75; 
} 
.tabel tr:nth-child(even) { 
    background-color: #fafafa; 
} 
.tabel td { 
    vertical-align: middle; 
    border: 1px solid #000000; 
    border-width: 0px 1px 1px 0px; 
    text-align: left; 
    padding: 7px; 
    font-size: 12px; 
    font-family: Arial; 
    font-weight: normal; 
    color: #000000; 
} 
.tabel tr:last-child td { 
    border-width: 0px 1px 0px 0px; 
} 
.tabel tr td:last-child { 
    border-width: 0px 0px 1px 0px; 
} 
.tabel tr:last-child td:last-child { 
    border-width: 0px 0px 0px 0px; 
} 
.tabel tr:first-child td { 
    background: -o-linear-gradient(bottom, #000000 5%, #000000 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000"); 
    background: -o-linear- gradient(top, #000000, 000000); 
    background-color: #000000; 
    border: 0px solid #000000; 
    text-align: center; 
    border-width: 0px 0px 1px 1px; 
    font-size: 14px; 
    font-family: Arial; 
    font-weight: bold; 
    color: #ffffff; 
} 
.tabel tr:first-child td:first-child { 
    border-width: 0px 0px 1px 0px; 
} 
.tabel tr:first-child td:last-child { 
    border-width: 0px 0px 1px 1px; 
}

그리고 경우 HTML에서

이 필요 - 여기있다 : 사전에

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<html> 

<head> 
    <title>Carcassonne</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 

<body> 
    <div id="header"> 
    <center> 
     <img id="header" src="img/header.png" alt="Carcassonne Logo" class="header"> 
    </center> 
    <ul class id="nav"> 
     <li><a href="index.html" class="button"> 
     Mängust</a> 
     </li> 
     <li><a href="reeglid.html" class="button"> 
     Reeglid</a> 
     </li> 
     <li><a href="laiendused.html" class="button"> 
     Laiendused</a> 
     </li> 
     <li><a href="autorist.html" class="button"> 
     Autorist</a> 
     </li> 
     <li><a href="voistlused.html" class="button"> 
     Võistlused</a> 
     </li> 
     <li><a href="osta.html" class="button"> 
     Ostmine</a> 
     </li> 
    </ul> 
    </div> 
    <div id="container"> 

    Content 
</body> 
</div> 

</html>

감사합니다!

출처

2014-12-14 nolem

이것이 해결 될지 확실하지 않지만 사용자가 수레를 지우지 않았 음을 확인합니다. – PlantTheIdea

이를보십시오. 항목을 움직일 때 당신은 떠있는 요소에 너비를 추가해야합니다. http://jsfiddle.net/02j2Lzfd/. 그래서 제가 한 것은 6 개의 li 요소를 취해 850px 너비로 나누었습니다. 미래에 더 많은 리튬을 더하고 싶다면, 리의 수를 컨테이너의 너비로 나눈 값을 나누면됩니다.

#nav li { 
    float: left; 
    display: inline-block; 
    width: 141.666px; 
}

출처

2014-12-14 16:40:26 dowomenfart

이 솔루션은 트릭을했습니다! 감사. – nolem

당신은 설명을 얻을 희망이 NO 문제. 내가 할 수있는 최선을 설명하려고 노력했다. – dowomenfart

시험이 해킹 </li> 후 HTML 주석을 추가 참조 : http://jsfiddle.net/7a1x4e4s/

<li><a href="osta.html" class="button"> 
     Ostmine</a> 
     </li><!-- !>

출처

2014-12-14 16:34:40 toto21

첫 번째 div; div id, img id 및 class all = 헤더. ID는 페이지에서 한 번만 사용할 수 있으며 클래스라고 부를 수는 없습니다. ID로 유지하기로 결정했다면 CSS에서 #header 여야합니다.

보고있는 줄은 랩핑의 두 부분입니다. # 컨테이너에 margin-top:100px;을 추가하면 별도로 표시됩니다.

출처

2014-12-14 16:43:34 csaw

일부 브라우저에서 탐색 표시 줄에 결함이 있음

답변

관련 문제