Fatal编程技术网
  • javascript/
  • Javascript 如何在firefox中使用css宽度

Javascript 如何在firefox中使用css宽度

javascript css

Javascript 如何在firefox中使用css宽度,javascript,css,cross-browser,width,alignment,Javascript,Css,Cross Browser,Width,Alignment,我正在创建一个web系统，但它在firefox中没有正确显示（可能在IE中也没有），但在Google Chrome中它非常棒，页面是： 问题是我的组件在Firefox中太大。我正在使用宽度：760px并在这760像素上重复一个小宽度图像。但firefox的分辨率超过760像素（如链接所示） 这是我的ul html代码： <body id="maincontent"> <ul class="ulmenu"> <li><a href=

我正在创建一个web系统，但它在firefox中没有正确显示（可能在IE中也没有），但在Google Chrome中它非常棒，页面是：

问题是我的
    组件在Firefox中太大。我正在使用宽度：760px并在这760像素上重复一个小宽度图像。但firefox的分辨率超过760像素（如链接所示）

    这是我的ul html代码：

    <body id="maincontent">
    <ul class="ulmenu">
        <li><a href="#" >Registrar</a></li>
        <li><a id="lastmenu" href="#" >Realizar login</a></li>
    </ul>
</body>
    为了使菜单的选项集中化，我使用jQuery在JS中创建了一些代码。如果我删除这段代码，firefox中绿色图像的宽度会变小，但仍然比需要的大（大约100px），chrome图像保持不变

    我只知道css的基本知识。有人能告诉我怎么解决吗

    ----编辑-----

    代码的Fiddler URL（但仅在最大化浏览器上注意到错误）：

    以下是我的理解

    看起来，在firefox中，您正在向元素样式中添加
    左填充
    ，这使得元素样式更宽

    ul.ulmenu li
{
    float: left; //remove it
    display: inline-block; // add it
}
    从js代码中删除这一行

    $(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");
    以下是我的理解

    看起来，在firefox中，您正在向元素样式中添加
    左填充
    ，这使得元素样式更宽

    ul.ulmenu li
{
    float: left; //remove it
    display: inline-block; // add it
}
    从js代码中删除这一行

    $(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");
    解决方案：将
    宽度：551px
    和
    显示：block
    提供给
    ul.ulmenu
    CSS类。这将解决问题

    原因：问题的原因是FF和铬处理
    显示：表格不同。对于
    display
    设置为
    table
    的元素，FF会将
    填充添加到宽度，而Chrome不会。解决方案是使用在两种浏览器中表现相同的
    display:block
    CSS属性（FF和Chrome为
    block
    元素的宽度添加
    padding
    ）
    解决方案：将
    宽度：551px
    和
    display:block
    添加到
    ul.ul.ul菜单的CSS类中。这将解决问题
    

    原因：问题的原因是FF和铬处理
    显示：表格不同。对于
    display
    设置为
    table
    的元素，FF会将
    填充添加到宽度，而Chrome不会。解决方案是使用
    display:block
    CSS属性，该属性在两种浏览器中的行为相同（FF和Chrome为
    block
    元素的宽度添加
    padding
    ）
    您可以设置一个JSFiddle示例吗？这个JSFiddle很有趣。。。。我马上就去。使用它容易得多，如果包含一个，您会得到更多帮助。li元素需要浮动吗？另外，我在你的ul中没有看到任何背景。你能设置一个JSFIDLE示例吗？这个JSFIDLE很有趣。。。。我马上就去。使用它容易得多，如果包含一个，您会得到更多帮助。li元素需要浮动吗？而且，我在你的ul中没有看到任何背景。太棒了！但是为什么要将宽度更改为551px呢？这样
    宽度
    （即551px）和
    左侧填充
    （即209px）一起可以提供所需的可见宽度，即760px。太棒了！但是为什么要将宽度更改为551px呢？这样
    宽度
    （即551px）和
    左侧填充
    （即209px）一起可以为您提供所需的可见宽度，即760px。谢谢您的回复！但另一个更准确。如果你解决了你的问题，欢迎你。但我必须说，209px是javascript计算出的宽度<代码>$（“.ulmenu”）.css（“左填充”，数学圆（（larTela menuWidth）/2）+“px”）如果您添加另一个li项目或更改列表项目宽度，551px将不再有效。是的，没错，我也必须使用javascript设置。谢谢您的回复！但另一个更准确。如果你解决了你的问题，欢迎你。但我必须说，209px是javascript计算出的宽度<代码>$（“.ulmenu”）.css（“左填充”，数学圆（（larTela menuWidth）/2）+“px”）如果您添加另一个li项或更改列表项的宽度，551px将不再有效。是的，没错，我也必须使用javascript设置。