同一浏览器中的CSS / HTML兼容性问题 [英] CSS/HTML compatibility issues across the same browser

查看:438
本文介绍了同一浏览器中的CSS / HTML兼容性问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

美好的一天。

我有一个很奇怪的问题。这是我第一次遇到这个。

I have a rather weird problem. And it is the first time I came across this.

我有一个html / css菜单(导航菜单),由ul列表和锚标签组成。
我使用边框底部突出菜单悬停...

I have an html/css menu (navigation menu) consisting of a ul list and anchor tags inside. I am using border-bottom to highlight the menu on hover...

现在问题:我有2个电脑上我工作 - 两个窗口7,不同版本。现在,在 chrome 和Firefox中,菜单显示正常。此外,我使用IE只有样式表来修复IE中的对齐问题。看看Image1在上面提到的浏览器中看到我的菜单...

Now issue: I have 2 PC's on which I work - Both windows 7, different editions. Now in chrome and firefox, the menu shows fine. Also, I am using an IE only stylesheet to fix an alignment issue in IE. Look at Image1 to see my menu in the above mentioned browsers...

现在在我的雇主的PC(Windows 8)和我的同事PC的, ,列表项会向下移动 - 在Chrome中。也在IE(没有在FF测试) - 参见Image2。

Now on my employer's PC(Windows 8) and on one of my colleagues PC's, also windows 8, the list items are shifted downwards - In Chrome. Also in IE(did not test in FF) - See Image2.

为什么css在Chrome浏览器上显示正常,而在他们的浏览器上显示不正常。

Why would the css display fine on my Chrome browsers but not on theirs. Everthing else on the pages displays fine between the browsers.

请参阅我的CSS定义菜单:

See my CSS defining the menu:

em>用于菜单的PARENT div的CSS /

/THE CSS FOR THE MENU's PARENT divs/

#wrapper {
    margin: 0 auto;
    margin: 20px auto;
    text-align: center;
    width: 960px;
    background: #f5f5f5; /*url('/images/bgMain.png') repeat center;*/
    -moz-box-shadow:0 0 5px #999;
    -webkit-box-shadow:0 0 5px #999;
    box-shadow:0 0 5px #999;
}

#header {
    margin: 0 auto;
    /*background: url('/images/bg2.png') repeat-x center;*/
    background: #eee;
    text-align: center;
    border-bottom: 6px solid #f3911f;
}

/ ************* *******这里的菜单CSS STARTS *************** /

/**********************HERE THE MENU CSS STARTS***************/

#menuNav {
    height: 100px;
    text-align: center;
    margin: 0 auto;
}
    #menuNav ul {
        list-style: none;

    }
    #menuNav ul li {
        display: inline-block;
        height: 100px;
        line-height: 178px;
    }
        #menuNav ul li a {
            padding: 0px 15px ;
            font-family: 'Myriad Pro', 'Open Sans', Arial, sans-serif;
            font-size: 22px;
            color: #3c3b3d;
            text-transform: uppercase;
            border-bottom: 6px solid #f3911f;
            text-decoration: none;
        }
            #menuNav ul li a.menuSmaller {
                font-size: 18px;
                padding-bottom: 2px;
            }
            #menuNav ul li a:hover {
                 border-bottom: 6px solid #7f2218;      
            }
            #menuNav ul li a:focus {
                border-bottom: 6px solid #7f2218;
            }

            /*LOGIN*/
            #menuNav ul li#login, #menuNav ul li#logout{                
                float: right;
                margin: 0px;
            }
                #menuNav ul li#login a, #menuNav ul li#logout a {
                    color: #7f2218;
                }

/*Show hover effect on selected/active menu*/
.activeMenu {
    border-bottom: 6px solid #7f2218 !important;      
}

HTML:

<div id="wrapper" class="row-fluid">

        <div id="header" class="row-fluid">
            <div id="logo" class="span2">
                <div><a href="Home.aspx" title="Card Vault logo"><img src="images/logo.png" alt="CardVault Logo" /></a></div>
            </div>
            <div id="menuNav" class="span10">           
                <ul>
                    <li id="menuSignUp"><a href="SignUp.aspx">Sign Up</a></li>

                    <li id="menuPricing"><a href="Pricing.aspx">Pricing</a></li>
                    <li id="menuCorporate"><a href="Corporate.aspx">Corporate</a></li>
                    <li id="menuAbout"><a href="About.aspx">About</a></li>
                    <li id="menuPartners"><a href="Partners.aspx">Partners</a></li>

                    <li id="login"><a href="login.aspx">Login</a></li>                  
                </ul>             
            </div>
        </div> 
</div>

注意:我使用twitter bootstrap做主布局,但我不认为这会导致任何

NOTE: I am using twitter bootstrap for the main layout, but I donlt think that that can cause any issues, it has never before...

此外,我们都有最新的Chrome版本...

Also, we both have the latest Chrome version...

谢谢!

推荐答案

我看到这种情况发生的唯一时间是在不同的操作系统之间。在这种情况下,它适用于Windows和Linux,但不适用于Mac。在各种情况之间的唯一共同的特征是,呈现的菜单字体出现不同。

The only times I have seen this happen was between different operating systems as well. In that case, it worked on Windows and Linux but not on Mac. The only common trait between the various occurrences was that the rendered menu font appeared different. And, yes, it cause me some headaches too.

您还可以通过 CTRL-0 重置页面缩放$ c>

You may also want to reset the page zoom by doing CTRL-0 just in case someone zoomed in and that screwing things up.

这是什么工作是调整菜单项的填充,直到一个不正确的显示正确和达到了两个。不幸的是,我只能通过尝试和错误,因为有问题的系统没有访问开发服务器。

What did work is to adjust the padding of menu items until the one incorrect showed up properly and that reached both. Unfortunately, I could only do it by trial and error since the system in question did not have access to the development server.

这篇关于同一浏览器中的CSS / HTML兼容性问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆