0

何らかの理由で、ブラウザ ウィンドウのサイズを変更すると、テキスト フィールドの下のボタンがテキスト ボックスよりも広くなるように見えます。理由はありますか?

SCRN :

ここに画像の説明を入力

HTML :

   <!DOCTYPE html>
    <html>
    <head>
        <title>Title</title>
        <script src="scripts/ajax.js"></script>
        <link rel="stylesheet" href="css/custom.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
<div data-role='page' id='confirmDetails' data-add-back-btn='true' data-theme='a'>
<div data-role='header' data-position='fixed'><h1>Confirm Details</h1></div>
<div class='ui-body ui-body-e'><p><strong>Please recheck your details to make sure they are correct, then press confirm.</strong></p></div>
<div data-role='content'>
<div><label>Name</label><input type='text' value='Some factor name' disabled /></div>
<div><label>VAT No</label><input id='txtFVATNo' type='text' value='121212121' placeholder='vat no' /></div>
<div><label>Email</label><input id='txtFEmail' type='email' value='a@b.com' autocapitalize='none' placeholder='email address' /></div>
<div><label>Name</label><input id='txtFContactName' type='text' value='Muhammad' autocapitalize='words' placeholder='contact name' /></div>
<input type='submit' id='btnConfirm' value='Everything Correct - Confirm!' data-icon='check' data-iconpos='right' /></div>
</div>
    </body>
    </html>

編集:

#confirmButton のカスタム css を幅 97% に設定しても機能しませんでした。

これはどちらも機能しませんでした:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

ボタンの CSS は次のとおりです。

webkit-appearance: none;
-webkit-box-align: center;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(255, 255, 255, 0);
background-image: none;
background-origin: padding-box;
border-bottom-color: black;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: black;
border-left-style: none;
border-left-width: 0px;
border-right-color: black;
border-right-style: none;
border-right-width: 0px;
border-top-color: black;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: black;
cursor: pointer;
display: block;
filter: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 1px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 39px;
left: 0px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.10000000149011612;
padding-bottom: 1px;
padding-left: 6px;
padding-right: 6px;
padding-top: 1px;
position: absolute;
text-align: center;
text-decoration: none;
text-indent: -9999px;
text-shadow: none;
text-transform: none;
top: 0px;
white-space: pre;
width: 391px;
word-spacing: 0px;
z-index: 2;

スクリーンショット(頭が痛いので):

ここに画像の説明を入力

解決 :

これは、最新の 1.1.0 リリースで動作します。

input.ui-input-text, textarea.ui-input-text {
    width: 100% !important;       /* used to be width: 97%; */
    /* add box sizing so padding is included in width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}​
4

4 に答える 4

1

では、 と の間でjquery.mobile-1.1.0.min.css幅、パディング、およびマージンの競合する組み合わせが存在するため、表示が異なります。input.ui-input-text, textarea.ui-input-text.ui-btn

css を次のように変更します。

.ui-btn {
    ....
    margin: 0.5em 0;   /* used to be margin: 0.5em 5px; */
    ....
}

input.ui-input-text, textarea.ui-input-text {
    ....
    width: 100% !important;       /* used to be width: 97%; */
    /* add box sizing so padding is included in width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    ....
}

これで問題が解決するはずです: http://jsfiddle.net/RVgnC/5/

于 2012-04-16T09:57:10.047 に答える
0

CSS ボタンに「padding-left / padding-right」がある場合は、「width:100%」を使用しないでください。

"width:97%" や 95% などに変更してみてください。

于 2012-04-16T09:50:29.323 に答える
0

それを表にすると、

http://www.w3.org/TR/REC-CSS2/tables.html#width-layout

プロパティ -><table style="table-layout:fixed">

これにより、設定された幅を超えて伸びるのを防ぐことができます! その中にjQueryボタンが含まれています;)

于 2012-09-19T14:17:34.267 に答える
0

古いバージョンでは、JavaScript を介して幅を後処理できます。ただし、パディングを 'px' に変更して $('.ui-content').outerWidth(); から差し引く必要があります。

于 2012-05-09T15:57:58.477 に答える