2

フォームのCSSコード、

form {
            margin:0 auto; 
            text-align:left;
            width:740px;
            border:1px solid #ccc;
            padding:15px;
            background:#fff;
            border-radius: 10px; 
            -moz-border-radius: 10px; 
            -webkit-border-radius: 10px; 
            box-shadow: 0 0 4px #ccc; 
            -webkit-box-shadow: 0 0 4px #ccc; 
            -moz-box-shadow: 0 0 4px #ccc;
            behavior: url(./border-radius.htc);
            font-family:Calibri;
            height: auto;
        }

JSフィドル

フォームの背景をフォームに合わせて拡大したいのですが、IE8ではなくChromeで発生しています。

選択に応じて表示されるように設定されている非表示の DIV があります。

また、Chrome と IE の CSS フォーマットを似たものにする方法を教えてください。

例: 2 つの div を表示したい場合、フォームはそれに応じて拡張されますが、IE ではフォームの境界線が拡張されません。

jsfiddle で作業コード全体を確認してください

ここに画像の説明を入力

4

1 に答える 1

0

Create a container div that goes around your form (in this case called formcontainer) and move the following CSS styles to that class.

    .formcontainer{
      border-radius: 10px;  
      -moz-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        box-shadow: 0 0 4px #ccc; 
        -webkit-box-shadow: 0 0 4px #ccc; 
        -moz-box-shadow: 0 0 4px #ccc;  
        border:1px solid #ccc;
        padding:15px;
        width: 740px;
    }

Then your form should have the following css rules:

        form {
        margin:0 auto; 
        text-align:left;
        width:100%;
        background:#fff;    
        behavior: url(./border-radius.htc);
        font-family:Calibri;
        height: auto;
    }

I'm not sure what your behaviour property is doing so you might need to move that to the container div as well.

http://jsfiddle.net/Jzbgj/1/

Aside

Also, your JavaScript may need amending as it displays my age as 25 when I enter my D.O.B when it should be 24.

This may help with your age calculation: Calculate age in JavaScript

于 2013-07-31T12:55:54.660 に答える