在具有相同系统的不同计算机上,相同版本的Firefox中的页面看起来不同

时间:2011-07-29 18:48:53

标签: html css firefox windows-7

之前我问过这个问题,但是对于Firefox有一点讽刺意味,并且没有任何示例,所以我的问题被低估了,我已经要求删除它。

现在我有我的问题的例子。 这需要一些时间来摆脱所有ASP.NET废话并使该示例可读,所以我真的很感激任何帮助。

该网站:

<!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">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <style type="text/css">
            body {
                font-family:arial, tahoma, sans-serif;
                font-size:12px;
            }

            .riTextBox {
                border:1px solid #aeaeae;
                padding:2px 0 2px 1px;
                font:11px arial,sans-serif;
                width: 70px;
            }

            .something {
                border: 0pt none;
                height: 1px;
                width: 1px;
            }
        </style>
    </head>
    <body>
            <div class="WizardInput" style="width: 300px;"> 
                <div>
                    <span style="display:inline-block;width:60px;">USD $</span>
                    <span style="white-space:nowrap;"><input class="riTextBox" type="text"><input class="something" type="text"><input class="something" type="text"><input type="hidden"></span>
                    <span style="white-space:nowrap;"><input class="riTextBox" type="text"><input class="something" type="text"><input class="something" type="text"><input type="hidden"></span>
                    <span style="white-space:nowrap;"><input class="riTextBox" type="text"><input class="something" type="text"><input class="something" type="text"><input type="hidden"></span>
                </div>
            </div>
    </body>
</html>

在我的电脑上看起来像这样:

my firefox 5

在其他计算机(这里是我的gf计算机)上看起来像那样:

her firefox 5

差异大约为1px,当我将300px更改为299px时,它随处可见。

有人有想法吗? 这对我来说真的很伤人,因为我需要在我的Firefox上测试网站。

2 个答案:

答案 0 :(得分:1)

将文本缩放重置为标准值。

我还确认没有网络/链接问题以某种方式干扰样式表。

答案 1 :(得分:0)

这是一个小提琴(我试过宽度:301px,它似乎工作FF5):

http://jsfiddle.net/XUZSF/

它似乎应该适合:

60 + 77 + 77 + 77 ==&gt; 291

但坦率地说不是。它可能是实现文本输入的方式......不确定为什么你不只是使用white-space:nowrap而不是父div?

这里的宽度为300,在父div上有白色空间,现在是:

http://jsfiddle.net/EKGk4/