請與CSS &鉻幫助,對老版本的Chrome瀏覽最後一個菜單項上新線呈現的,但在Firefox & &鉻的新版本的所有工作不錯。CSS:鍍鉻寬問題
屏幕(遠程調試): 桌面版Chrome: 元素:
CSS代碼:
/* menu start */
.menu, .menu * {
white-space: nowrap;
}
div#mainmenu-wrapper {
margin: 25px auto;
width: 1100px;
}
ul#mainmenu{
width: 1100px;
margin: auto;
padding: 0;
}
ul#mainmenu:after {
clear: both;
content: "";
display: block;
height: 1px;
visibility: hidden;
margin-left:1100px;
}
#mainmenu li {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 9px 0;
-moz-box-shadow: 0 0 1px 1px #ffffff;
-webkit-box-shadow: 0 0 1px 1px #ffffff;
box-shadow: 0 0 1px 1px #ffffff;
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=0, offY=0, color=#ffffff);
float: left;
display: inline;
margin-right: 10px;
padding: 5px 0 7px;
height: 38px!important;
}
#mainmenu li:last-child {
margin-right: 0;
}
#mainmenu a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #4d4d4d;
-moz-border-radius: 9px 0;
-webkit-border-radius: 9px 0;
border-radius: 9px 0;
box-shadow: 0 -3px #262626 inset;
font-size: 19px;
padding: 5px 18px 7px;
width: auto;
height: auto;
display: inline;
}
#mainmenu a:hover{
text-decoration: underline;
}
li.selected a{
color: #f00;
}
/* menu end */
這是一個跨瀏覽器填充差異的問題。如果我是你,我會使用每個「li」的百分比寬度,否則你將不得不破解它像素完美(然後它不響應) – mattytommo 2014-12-08 09:39:44