2012-10-29 81 views
0

My site here是流體寬度,但帶有搜索欄和圖像的中間標題部分無法在IE,Chrome或FF中正確調整大小。CSS造型流體寬度

我試過使用較低屏幕分辨率的媒體屏幕樣式表,但這只是導致在某些瀏覽器中右側圖像的右側存在一個間隙,它們以不同的方式顯示寬度。

如果任何人都可以看看它,並在不同的分辨率和瀏覽器,這將是偉大的,也許有助於任何建議。

目前在IE9中,當它在1263像素(約1250像素)下稍微減少時,圖像完全跳下來,看起來很糟糕。

這裏的CSS:

/*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; 
} 

任何想法,將不勝感激。

回答

1

#middle-top a float:right並將寬度改爲80%