Question

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>to patch omnigrid style</title>
<style type="text/css">
.pDiv{
    border : 1px solid #ccc;
    padding : 2px 5px;
    font-size : 12px;
    font-family : "Microsoft YaHei", "宋体",Arial, Helvetica, sans-serif;
}

.pButton{
    width : 16px;
    height : 16px;
    border : none;
    background-position : 0px 3px;
    -webkit-background-position : 0px 1px;
    background-color : #fff;
    background-repeat : no-repeat;
    cursor : pointer
}
.pInput{
    text-align:center
}
#first{
    background-image : url(imgs/first.gif);
}

#prev{
    background-image : url(imgs/prev.gif);
}
#next{
    background-image : url(imgs/next.gif);
}
#last{
    background-image : url(imgs/last.gif);
}
</style>
</head>
<body>
<div style="padding: 100px 100px 100px 100px">
<div class="pDiv">每页显示：
    <SELECT class=rp name=rp>
    <OPTION selected value=10>10</OPTION>
    <OPTION value=20>20</OPTION>
    <OPTION value=50>50</OPTION>
    <OPTION value=100>100</OPTION>
    <OPTION value=200>200</OPTION>
    </SELECT>&nbsp;～
    <button id="first" class="pButton" title="第一页"></button>
    <button id="prev" class="pButton" title="上一页"></button>
    第<input class="pInput" type="text" size="2" />页共10页
    <button id="next" class="pButton" title="下一页"></button>
    <button id="last" class="pButton" title="最后一页"></button>
</div>
</div>
</body>
</html>

IE： alt text

火狐： alt text

Answer 1

通常在Firefox和其他符合标准的浏览器中使其看起来更容易，然后对IE应用修复程序。

Answer 2

在这里我修改了内容，请尝试这个，它可以在不同的浏览器上运行

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>to patch omnigrid style</title> <style type="text/css"> .pDiv{
        border : 1px solid #ccc;
        padding : 2px 5px;
        font-size : 12px;
        font-family : "Microsoft YaHei", "宋体",Arial, Helvetica, sans-serif;
        position:absolute; }
    *{padding:0px;margin:0px;} 
.pButton{
        width : 16px;
        height : 16px;
        border : none;
        background-position : 0px 3px;
        -webkit-background-position : 0px 1px;
        background-color : #fff;
        background-repeat : no-repeat;
        cursor : pointer } .pInput{
        text-align:center }
    #first{
        background-image : url(imgs/first.gif); }

    #prev{
        background-image : url(imgs/prev.gif); }
    #next{
        background-image : url(imgs/next.gif); }
    #last{
        background-image : url(imgs/last.gif); } </style> </head> <body> <div style="padding: 100px 100px 100px 100px; position: relative;"> <div class="pDiv">每页显示：
        <SELECT class=rp name=rp>
        <OPTION selected value=10>10</OPTION>
        <OPTION value=20>20</OPTION>
        <OPTION value=50>50</OPTION>
        <OPTION value=100>100</OPTION>
        <OPTION value=200>200</OPTION>
        </SELECT>&nbsp;～
        <button id="first" class="pButton" title="第一页"></button>
        <button id="prev" class="pButton" title="上一页"></button>
        第<input class="pInput" type="text" size="2" />页共10页
        <button id="next" class="pButton" title="下一页"></button>
        <button id="last" class="pButton" title="最后一页"></button> </div> </div> </body> </html>

复制并粘贴到您的页面中。它有效

我测试了IE＆amp; firefox，请标记为答案。

感谢阿布舍克巴克

请帮助使这个html页面在firefox中看起来相同

2 个答案: