我有一个与StackOverflow上的菜单非常相似的菜单.问题是我的菜单在每个浏览器中看起来都是正确的,我已经在我的iPhone上测试了它.
这是iPhone的屏幕截图
现在显然“添加事件”按钮应该与其余按钮大小相同.
这是我的标记
这是我的CSS #menucontainer{position:relative; width:675px; float:right;} ul.menu { padding: 0 0 2px; position: relative; margin: 0; } ul.menu li { display: inline; list-style: none; } ul.menu li a { padding: 8px 18px; font-weight: bold; text-decoration: none; line-height: 2.8em; background-color: #666; color: #fff; border: 1px solid black; text-shadow:#000 0px 1px 1px; } ul.menu li a.youarehere { background-color:@brand_color; color: #fff; } ul.menu li a:hover { background-color:@brand_color; text-decoration: none; } ul.menu li a:active { background-color:@brand_color; text-decoration: none; } ul.menu li.selected a { background-color:@brand_color; color: #000; } .floatright { float: right; } .floatleft { float: left; } 不幸的是我无法想出这个.提前感谢任何方向. 编辑: 这是发送到浏览器的最终输出 编辑: 在jsbin上再现http://jsbin.com/akadi3/2(注意:显然你需要iOS浏览器才能看到问题) 最佳答案 好吧,所以经过大量的摆弄后,似乎如果我在菜单容器中添加一个height属性,那么我一切都很好. #menucontainer { position:relative; width:675px; height:40px; /* this fixed the problem */ float:right; font-size:80%; } 上一篇:ruby-on-rails – Rails:如何让下一篇:javascript – 是否可以在没有外部
这是我的CSS
#menucontainer{position:relative; width:675px; float:right;} ul.menu { padding: 0 0 2px; position: relative; margin: 0; } ul.menu li { display: inline; list-style: none; } ul.menu li a { padding: 8px 18px; font-weight: bold; text-decoration: none; line-height: 2.8em; background-color: #666; color: #fff; border: 1px solid black; text-shadow:#000 0px 1px 1px; } ul.menu li a.youarehere { background-color:@brand_color; color: #fff; } ul.menu li a:hover { background-color:@brand_color; text-decoration: none; } ul.menu li a:active { background-color:@brand_color; text-decoration: none; } ul.menu li.selected a { background-color:@brand_color; color: #000; } .floatright { float: right; } .floatleft { float: left; }
不幸的是我无法想出这个.提前感谢任何方向.
编辑:
这是发送到浏览器的最终输出
编辑: 在jsbin上再现http://jsbin.com/akadi3/2(注意:显然你需要iOS浏览器才能看到问题) 最佳答案 好吧,所以经过大量的摆弄后,似乎如果我在菜单容器中添加一个height属性,那么我一切都很好. #menucontainer { position:relative; width:675px; height:40px; /* this fixed the problem */ float:right; font-size:80%; }
在jsbin上再现http://jsbin.com/akadi3/2(注意:显然你需要iOS浏览器才能看到问题)
#menucontainer { position:relative; width:675px; height:40px; /* this fixed the problem */ float:right; font-size:80%; }