当前位置：首页 → 问答吧 → 新手求助浏览器兼容问题

新手求助浏览器兼容问题

时间：2011-10-14

来源：互联网

HTML code

<html>
<head>
    <title>JS版计算器</title>
    <style>
        body{
            margin:0px;
            padding:0px;
            text-align:center;
        }
        #container{
            width:960px;
            margin:36px auto;
            padding:0px;
        }
        #container h3{
            margin:0px;
            padding:0px;
        }
        #container p{
            padding:0px;
            margin-left:120px;
            margin-top:10px;
            font-size:12px;
        }
        #counter{
            margin:0px;
            padding:0px 0px 5px 0px;
            width:350px;
            border:1px solid #CCC;
        }
        #counter span{
            width:292px;
            height:36px;
            margin:10px 0px;
            padding:15px 5px 0px 0px;
            text-align:right;
            border:1px solid #999;
        }
        .Button{
            width:60px;
            height:30px;
            line-height:30px;
            margin:5px;
            padding:0px;
            border:1px solid #999;
        }
    </style>
    <script>
        function Counter(obj){    
            document.getElementById("show").innerHTML+=obj;
        }
    </script>
</head>
<body>
    <div id="container">
        <h3>JS版计算器</h3>
        <p>作者：林中侠客</p>
        <div id="counter">
            <span id="show"></span>
            <br>
            <input type="button" name="_7" id="_7" value="7" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_8" id="_8" value="8" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_9" id="_9" value="9" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_+" id="_+" value="+" class="Button" onClick="Counter(this.value);" />
            <br>
            <input type="button" name="_4" id="_4" value="4" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_5" id="_5" value="5" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_6" id="_6" value="6" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_-" id="_-" value="-" class="Button" onClick="Counter(this.value);" />
            <br>
            <input type="button" name="_1" id="_1" value="1" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_2" id="_2" value="2" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_3" id="_3" value="3" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_+" id="_*" value="*" class="Button" onClick="Counter(this.value);" />
            <br>
            <input type="button" name="_0" id="_0" value="0" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_." id="_." value="." class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_=" id="_=" value="=" class="Button" onClick="Counter(this.value);" />
            <input type="button" name="_+" id="_/" value="/" class="Button" onClick="Counter(this.value);" />
        </div>
    </div>
</body>
<html>

为什么IE和FF的显示效果不一样呢，IE会居中FF不会居中

作者: luojianqun 发布时间: 2011-10-14

在　#counter 加个margin:auto;　就可以了

作者: happy175 发布时间: 2011-10-14

#counter{
margin:auto;
padding:0px 0px 5px 0px;
width:350px;
border:1px solid #CCC;
}
#counter span{
width:292px;
height:36px;
margin:10px 0px;
padding:15px 5px 0px 0px;
text-align:right;
border:1px solid #999;
display:inline-block;
}

作者: dd0607 发布时间: 2011-10-14

加dtd

作者: ddcatlee 发布时间: 2011-10-14

两个问题第一个#counter span 行属性 span 要想加宽高需要变为块属性

第二个问题文档声明是一个html所必需有的字符编码集也要写累
<!DOCTYPE html>

<meta charset="utf-8">

这是html5 文档声明和字符编码集

作者: king_lyly 发布时间: 2011-10-14