Safari中div宽度的差异

时间:2014-02-14 20:03:25

标签: html css google-chrome safari

在safari中,我的菜单导航下拉菜单的背景比Chrome / Firefox中的要宽得多。我没有看到那个宽度的任何css属性来解释为什么会发生这种差异。

实时网址:http://bit.ly/1g4YBhT

enter image description here

Safari浏览器

enter image description here

实时网址:http://bit.ly/1g4YBhT

CSS

#fixed #menu ul.level1 div {position:absolute; left:-9999px; z-index: 3000; background-color: #53CDD7; }
#fixed #menu ul.level1 div ul { width: 100%; }

#fixed #menu ul.level1 li:hover div { left: 0; top:44px; padding-bottom: 10px; }
#fixed #menu ul.level1 li:hover div ul {display:block; position:relative; }

#fixed #menu ul.level1 li div ul { line-height: 22px; }
#fixed #menu ul.level1 li div ul li a { background: transparent url("../Images/Menu/arrow.png") 5px 2px no-repeat; font-family: 'blissregular'; font-weight: normal; /* margin: 0 10px 0 10px; */ padding: 0 0 0 15px; margin-left: -20px; }
#fixed #menu ul.level1 li div ul li a:hover { color: #00ADEF; }

#fixed #menu ul.level1 li div ul.level2 li { height: 14px; background: none; text-align: center; display: inline; list-style-type: none; line-height: 16px; float: left; margin: 11px 0 0 0; padding: 0 25px 0 25px; position:relative; border-right: none; text-align: left; width: 100%; }

#fixed #menu ul.level1 li div ul.level2 li a { text-transform: lowercase; }
#fixed #menu ul.level1 li div ul.level2 li a:hover { color: #504F4B !important; text-transform: lowercase; }

2 个答案:

答案 0 :(得分:2)

在Safari(Windows)中,我发现从white-space: nowrap;删除#fixed #menu ul为我解决了问题。请参阅global-en.css样式表的第343行。

答案 1 :(得分:0)

使用此

.selector { (;property: value;); } 
.selector { [;property: value;]; }

并仅为safari声明背景的宽度,使其宽度与chrome和firefox相同。