0
My site here은 유체 너비이지만 검색 표시 줄과 이미지가있는 중간 머리글 섹션은 IE, Chrome 또는 FF에서 정확하게 크기가 조정되지 않습니다.CSS 스타일링 요새 유체 너비
더 낮은 화면 해상도를 위해 미디어 화면 스타일 시트를 사용해 보았습니다.하지만 너비가 다르게 표시되는 일부 브라우저에서는 오른쪽 이미지의 오른쪽에 틈이 생깁니다.
사람들이 다른 해상도와 브라우저에서보기 좋게 볼 수 있다면 좋을 것입니다. 그리고 아마도 도움이 될 것입니다.
현재 IE9에서 1263px (약 1250px) 미만으로 약간 줄이면 이미지가 완전히 아래로 점프되어 끔찍하게 보입니다. 어떤 아이디어가 많이 주시면 감사하겠습니다
/*Town Image */
#town-image-search {
box-shadow:0 5px 5px #CCC;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#e4e4e4');
border-top:1px solid #D6D2D5;
border-bottom:#d1d1d1;
}
#search-bar {
float:left;
width:16.5%;
padding:8px 15px;
}
input#search {
width:100%;
height:22px;
color:#aaa;
text-indent:10px;
border:1px solid #d6d6d6;
font-size:14px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 0 6px;
padding:0;
}
input#submit {
width:100%;
border:1px solid #666;
height:22px;
color:#fff;
text-shadow:0 1px 0 #555;
background-color:#803C6D;
font-family:'Arial Rounded MT Bold';
cursor:pointer;
-webkit-border-top-right-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0;
}
#middle-top {
height:68px;
float:left;
width:81%;
border-left:1px solid #Fafafa;
}
#town-name {
word-spacing:5px;
position:relative;
z-index:0;
float:left;
font-family:'arial rounded mt bold';
font-size:36px;
color:#354057;
line-height:69px;
text-indent:27px;
letter-spacing:-3px;
}
#town-name span {
font-family:'arial rounded mt bold';
color:#354057;
}
img#heart {
float:right;
width:230px;
height:68px;
position:relative;
z-index:10;
margin-right:-120px;
}
img#town-image {
width:404px;
height:68px;
float:right;
}
:
다음은 CSS입니다.