1
편집 - 업데이트 : .header h1 {float : left;}으로 해결 된 간단한 플로트 문제였습니다. 하지만 Safari와 Chrome에서 왜 처음부터 문제가 발생했는지, 왜 다시로드하면 문제가 발생했는지 궁금합니다. 따라서 진단에 관심이있는 경우 원래의 수정되지 않은 코드를 남겨 두었습니다.웹킷의 웹 사이트 레이아웃이 잘못되었지만 다시로드 한 후 수정 됨
원본 메시지 :
나는 당황하고 있습니다. Chrome이나 Safari에서 처음으로 내 웹 사이트를로드 할 때 (Firefox는 괜찮습니다) 탐색이 잘못 표시됩니다. 그러나 페이지를 새로 고침/새로 고침 할 때 레이아웃 문제 (대개 브라우저 및 OS에 따라 다름)가 사라지고 의도 한대로 표시됩니다. 또한 탐색 창을 변경하는 미디어 쿼리가 적용된 후에도 브라우저 창의 크기를 변경하면 (축소 한 다음) 브라우저 창 크기를 변경하면 문제가 해결됩니다 (일반적으로). 또한 브라우저를 완전히 닫은 다음 웹 페이지를 열면 문제가 다시 발생합니다.
- 왜 레이아웃 파괴는 다음과 같습니다
나는이 개 질문이? - 해산.
- 브라우저를 다시로드하거나 미디어 쿼리를 실행하면 문제가 해결되는 이유는 무엇입니까?
여기 관련 코드가 있습니다. 난이 새로운, 그래서 내 CSS가 이상하고 중복 코드가있을 수 있습니다.
HTML
<div class="header">
<div class="logo"><h2>Logo</h2></div>
<h1>Name</h1>
<div class="nav">
<ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li></ul>
</div>
<h3>Subject</h3>
</div>
CSS 여기
.header{
padding-left: 20px;
margin: 0 auto;
}
.header h1, .nav{
display: inline-block;
}
.nav {
width: 400px;
height: 100px;
line-height: 100px;
margin-right: 0;
padding-right: 0;
float: right;
}
.nav ul {
display: inline;
list-style: none;
position: relative;
padding: 0;
width: 100%;
}
.nav li {
display: block;
float: left;
text-align: center;
text-transform: uppercase;
width: 33%;
}
할 경우에 당신은 아래 .nav ul div에 position: relative을 추가 한
@media only screen and (max-width: 610px) {
.header h1{
display: none;
}
.logo h2{
display: inline;
}
.header{
text-align: center;
}
.nav{
float: none;
margin-left: -12px;
height: 50px;
line-height: 50px;
}
.wrap{
padding-left: 0px;
}
.header h3{
margin-top: -70px;
margin-left: -12px;