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搜索表单不能缩放缩放

回答

相关问题