WordPress搜索表單不能縮放縮放

我的網站的鏈接是http://www.tutorialboy.com。我在搜索框中遇到問題。每當我放大到150％或更高時，搜索框就會失去位置。我使用二十一個主題。我只是在裏面定製了一些東西。我只是想讓搜索框保持原樣，當我沒有放大時。我是新來的整個網頁設計的東西，所以請原諒我，如果我在這個網站上做任何錯誤。只需評論，如果你需要任何額外的細節&我會和你一起找到他們。只需去我的網站請&看看你是否可以找出我的問題。這些樣式規則我定製：WordPress搜索表單不能縮放縮放

input#s { 
    background: url(images/search.png) no-repeat 5px 6px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    font-size: 14px; 
    height: 22px; 
    line-height: 1.2em; 
    padding: 4px 10px 4px 28px; 
    text-align: center; 
} 

#branding #searchform { 
    position: absolute; 
    top: 169px; 
    right: 0px; 
    text-align: right; 
    background-color: #f9f9f9; 
    color:#ffffff; 
    border: 10px solid #000; 
} 


#branding #s { 
    float: right; 
    -webkit-transition-duration: 400ms; 
    -webkit-transition-property: width, background; 
    -webkit-transition-timing-function: ease; 
    -moz-transition-duration: 400ms; 
    -moz-transition-property: width, background; 
    -moz-transition-timing-function: ease; 
    -o-transition-duration: 400ms; 
    -o-transition-property: width, background; 
    -o-transition-timing-function: ease; 
    width: 940px; 
} 

#branding #s:focus { 
    background-color: #f9f9f9; 
    width: 940px; 
}

來源

2013-07-26 Devin Smith

您使用的是什麼版本的IE？ –

@ElijahMurray，不是IE特定的，Google Chrome也是這樣。 – Hailwood

@Devin Smith;我的眼睛......我可憐的可憐的眼睛！無論如何;基本問題是你的輸入具有固定的寬度;該網站的其餘部分是響應式的;您還需要使輸入響應。 – Hailwood

所有你需要做的就是讓窗體的寬度是100％，並添加箱上漿#branding #searchform，然後添加CSS屬性box-sizing:border-box;。這將確保它包含100％的填充和邊距，而不是出血。

#branding #searchform { 
position: absolute; 
top: 169px; 
right: 0px; 
text-align: right; 
background-color: #f9f9f9; 
color:#ffffff; 
border: 10px solid #000; 
width: 100%; 
box-sizing: border-box; 
}

來源

2013-07-26 02:01:38

WordPress搜索表單不能縮放縮放

回答

相關問題