0

私のサイトへのリンクはhttp://www.tutorialboy.comです。検索ボックスに問題があります。150% 以上にズームインするたびに、検索ボックスの位置がずれます。21 のテーマを使用しています。その中のいくつかをカスタマイズしただけです。ズームインしていないときと同じように、検索ボックスをそのままにしておきたいだけです。私はWebデザイン全体に不慣れなので、このサイトで何か間違ったことをした場合はご容赦ください. 追加の詳細が必要な場合はコメントしてください。それらを見つけるために協力します. 私のサイトにアクセスして、私の問題を理解できるかどうかを確認してください。これらは、私がカスタマイズしたスタイル ルールです。

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;
}
4

1 に答える 1

0

フォームの幅を 100% にして、box-sizing #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-26T02:01:38.097 に答える