在safari中,我的菜单导航下拉菜单的背景比Chrome / Firefox中的要宽得多。我没有看到那个宽度的任何css属性来解释为什么会发生这种差异。
铬
Safari浏览器
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; }
答案 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相同。