html - CSS left, position 和 floating ...在多个浏览器中的不同结果

标签 html css

左,位置和 float 。不同的结果在多个浏览器中。这里发生了什么?提前致谢!

图片在这里 CSSProblem

这是带有 header 值的 Index.css

            #static_header { background: url('white_grid_bg.png') repeat scroll 0% 0% transparent; height: 80px; border-top: 1px solid rgb(201, 208, 214); width:100%; position: relative; }
            #static_header .link_wrapper { width: 960px; padding: 0px 10px; margin: auto; }
            #static_header .link_wrapper a { float: right; position: relative; text-transform: uppercase; }

            #static_header .link_wrapper img { float: right; position: relative; top: 26px; /*padding-right: -154px;*/  padding-left:15px;border-left: 1px dotted black;z-index:8;  width: 11%; }
            #static_header .link_wrapper .txtlink { top: 30px; margin-right: 20px; font-family: helvetica,arial,sans-serif; font-size: 12px; font-weight: bold; color: rgb(105, 113, 126); text-decoration: none; padding: 1px 0px; }
            #static_header .link_wrapper a.txtlink:hover, #static_header .link_wrapper a.txtlink.active { color: rgb(17, 68, 132); border-bottom: 2px solid rgb(50, 142, 236); }
            #static_header .link_wrapper #header_logo { float: left; background: url('aspelogo6.png') no-repeat scroll 0% 0% transparent; height: 90px; width:90px; top: 3px; position: relative; z-index: 400;  left: 0px; margin-left: -98px;display:block; width:10%; }

这是导航的 HTML 代码

        <!-- Navigation Panel -->
        <div class="container">

            <div >  
              <ul id="nav">
                <li class="current"><a href="#" title="Home" >Home</a></li>
                <li><a href="http://www.freshdesignweb.com/" >Catalogs</a></li>
                <li><a href="http://www.freshdesignweb.com/" >Products</a></li>
                <li><a href="http://www.freshdesignweb.com/" >About Us</a></li>
                <li><a href="http://www.freshdesignweb.com/" >Contact</a></li>
              </ul>
            </div>  
        </div>

这是导航样式表

            /*  NAVIGATION Buttons*/
            #nav { top: -1091px; padding-top: 0.85em; width: 50%;font-family:'Alegreya SC', Georgia, serif; font-size: 1.4em; position:relative; z-index:118;  float:right; right: 290px;  }
            #nav li { margin: 0 0 0.5em 0; display: block; float: left; clear: none; margin-right: 2.5%; background:#d18b5e; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding:5px 10px 5px 10px;}
            #nav li:last-child { margin-right: 0; }
            #nav a { display: block; color: #FFF; text-decoration:none; }
            #nav a:hover { color: #484a50; border-bottom-color: #484a50; }

最佳答案

尝试将 position:relative 添加到导航的容器 div,然后添加 position:absolute; 导航。

float:right;position:relative; 表现不佳。

关于html - CSS left, position 和 floating ...在多个浏览器中的不同结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13724210/

相关文章:

javascript - 如何自定义 bootstrap fixed navbar-default 以便 li 元素向下对齐?

css - 我如何解决 IE 11 中 flexbox + inline-block + overflow 导致重叠的行为?

javascript - HTML/CSS : How to make a bar on the side to take you to a certain part of the page

html - 调整浏览器 CSS 大小时内容超出比例

html - 使用 Mac VoiceOver 测试网页的辅助功能

javascript - 如何在javascript中定义动态变量

javascript - 如何使用 jQuery 从字符串中获取 HTML 元素

javascript - 我可以使用 vue js 显示 <p> 标签,但 2 秒后无法删除它

java - 如果当前 url 不以 "/"(斜杠)结尾,则链接不起作用

javascript - 重叠时如何滚动div