2

chrome中的css top或margin-top值与firefox和opera有很大不同,我该怎么办?例如,在 chrome 中,当我为 (.slide_content) 放置 (top:0px;) 时,我的菜单位于正确的位置,但在 Firefox 中我必须放置 (top:-80px;)。

我该怎么办?请帮助;在此先感谢。

而且萤火虫没有任何错误。抱歉,我无法发布 jsfiddle 链接,因为该网站包含很多图片,我真的很想发布图片,以便您更好地理解我的意思,我尝试了但我需要 10 个声誉但我只有 8 个,但这是我的代码:CSS:

    .tabbed_content {
        background-image:url('images/ct.png');
        width: 620px;
             height:62px;       
                 }

    .tabs {
        height: 62px;
        position: relative;
       /* top: 0px;
        left: 0px;
        width: 313px;*/
    }

    .tabs .moving_bg {
        background-color:#7F822A;
        -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
        position: absolute;
        width: 125px;
        z-index: 190;
        left: 0;
        padding-bottom: 29px;
        background-position: left bottom;
        background-repeat: no-repeat;
                     top: 3px;
                     height: 15px;
                     padding-left: 15px;
                     padding-right: 15px;
                     padding-top: 15px;
                 }

    .tabs .tab_item {
        display: block;
        float: left;
        padding: 15px;
        width: 125px;
        color: #ffffff;
        text-align: center;
        z-index: 200;
        position: relative;
        cursor: pointer;top:-130px;
    }

    .tabbed_content .slide_content {
        overflow: hidden;
        background-image: url('images/bkg.png');
        padding: 20px 0 20px 20px;
        position: relative;
        top:0px;     /*THE PROBLEM IS HERE*/

    }
    .tabbed_content
    {
     width:310px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 20px;
     margin-left:15px;
    }
    .slide_content {width:940px;height:380px;}
    .tabslider {
        width: 5000px;
    }

    .tabslider div {
        float: left;
        width: 560px;
        margin: 0px;
        padding: 0px;
        margin-right: 40px;width:900px;
    }
 a.ma:hover {text-decoration: underline;}
     a.ma{text-decoration:none; color:White;margin-left:650px;}

      #menu
        {

 position:relative;

            z-index:1;
            bottom: -50px;
            left:-175px;
            width: 1016px;
        }

#menu ul {

            z-index:9999;

            width: 866px;
            margin-left: 150px;
        }
        #menu ul li{height:400px;float:left;list-style:none;z-index:9999;


        }
        #menu li a{display:block;height:63px;z-index:9999;

font-size:20px;padding-top:90px;text-align:center;text-decoration:none;text-transform:uppercase;color:white;
            margin-left: 0px;
            }
            #menu li a:hover, #menu #menu_active a{}
.nav1 {background:url('images/menu1.gif')  center 35px  no-repeat    }
.nav2 {background:url('images/menu4.gif') center 35px no-repeat}
.nav3 {background:url('images/menu5.gif') center 35px no-repeat}
.nav4 {background:url('images/abus.gif') center 0px no-repeat}

.nav1:hover, .nav1#active {background:url('images/menu1_active.gif') center 31px no-repeat #001527}
.nav2:hover, .nav2#active {background:url('images/menu4_active.gif') center 31px no-repeat #001527}
.nav3:hover, .nav3#active {background:url('images/menu5_active.gif') center 31px no-repeat #001527}

.wrapper {overflow:hidden;float:right; height: 450px; margin-left: 63px;margin-right:0px; width: 941px;
position: relative; 
    z-index: 2;
            top: 0px;
            left: -32px;
        }

HTML:

<div style="background:url('images/toolbar2.png') no-repeat center top; height: 265px; width: 1013px;position:relative;">
    <div class="wrapper"> 
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Names="Andalus" 
        Font-Size="XX-Large" ForeColor="White" Text="Welcome To Saray Ceram"></asp:Label>


                            <br />

                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                                <div style="height: 26px;margin-top:-70px; ">
                                 <a class="ma"  href="#">Site Map</a>

                                    <asp:TextBox ID="TextBox1" runat="server" 
                                        style="Width:149px;margin-right:2px; margin-left: 650px;"></asp:TextBox>
                                    <div style="width: 27px; height: 27px; background-image:url('images/s.png') ;position:relative; bottom:29px; left: 810px;" onclick="" ></div>    




                    </div>
    <div id="menu"  > 
   <ul>
                        <li class="nav1" style="margin-left:50px;height: 154px"><a href="#" style="width:201px">&nbsp;&nbsp;Home</a></li> 

                        <li class="nav4" style="width:201px; height: 154px; margin-left: 0px;"><a href="#" style="width:200px"></a></li>

                        <li class="nav3" style="width:200px; height: 154px;margin-left: 0px;"><a href="#" style="width:200px">Contact Us</a></li>
                            <li class="nav2" style="width:201px; height: 154px;margin-left: 0px;"><a href="#" style="width:200px">Products</a></li>      

                         </ul>
                        </div>
                        </div>


    </div>
<div style=" background-image:url('images/bg_top2.jpg'); height: 600px; width: 990px; margin-left:0px;margin-right:0px"> 
    <br />
    <br />
        <div class='tabbed_content'> 
                    <div class='tabs'> 
                        <div class='moving_bg'> 
                            &nbsp;
                        </div> 
                        <span class='tab_item'> 
                            Wall Tale
                        </span> 
                        <span class='tab_item'> 
                            Floor Tale
                        </span> 

                    </div> 

                    <div class='slide_content'>                     
                        <div class='tabslider'> 
                            <div> 

                                               sth comes here
                            </div> 
                            <div  > 
                                                       and here
                            </div> 

                        </div> 

                    </div>

                    </div>

     <br /> 
     <br />

<div  style=" background-image:url('images/bg_bot.jpg');width:988px;height:105px;margin-top:400px;" >
    <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Andalus" 
        Font-Size="Large" ForeColor="White" Text="Copy Right © 2013 For Saray Ceram"></asp:Label>

    </div>

它还包含一些 javascript 函数,但我认为它们与我的问题无关。我真的非常感谢您的帮助,这对我来说已成为一个大问题。也有人建议我使用 normalize.css 我将其复制并粘贴到 ma 样式表中并将其包含在我的网站中,但没有任何改变。

4

2 回答 2

1

通常 Firefox 和 Chrome 将/应该呈现相同的内容,除非出现严重错误。

首先通过html 验证器运行您呈现的 HTML ,并确保没有错误。

然后尝试摆脱所有这些&nbsp;,并尝试使用CSS 重置

于 2013-07-29T05:16:09.373 回答
0

在处理浏览器兼容性时必须牢记以下几点:

1) 对所有 HTML 元素应用重置样式。html 元素的默认样式在所有浏览器中都不相同。所以首先应该做的是包括重置样式。rest.css 将具有如下所示的样式:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2) 正确理解 CSS Box 模型。浏览器将每个元素视为一个盒子,并在其上应用样式。

3)如何使用浮动来排列html页面中的各个部分。

4)如何使用定位元素?

于 2013-07-29T05:52:00.917 回答