表单背景样式在IE8.0中不随表单扩展

时间:2013-07-31 12:22:51

标签: html css internet-explorer

我的表单的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 Fiddle

我希望表单背景随表单一起展开,它发生在Chrome中但不发生在IE8中。

我有一些隐藏的DIV根据选择设置为可见。

另外,我如何才能使Chrome和IE的CSS格式看起来相似。

例如:如果我想使2 div可见,那么表单将相应地扩展,但是形式边框不会在IE中扩展。

请查看jsfiddle中的整个工作代码

enter image description here

1 个答案:

答案 0 :(得分:0)

创建一个围绕表单的容器div(在本例中称为formcontainer),并将以下CSS样式移动到该类。

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

然后您的表单应具有以下css规则:

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

我不确定你的行为属性在做什么,所以你可能需要将它移动到容器div。

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

<强>除了

此外,您的JavaScript可能需要修改,因为当我输入D.O.B时它应该是24岁时显示我的年龄为25岁。

这可能有助于您的年龄计算: Calculate age in JavaScript