2014-12-08 82 views
1

請與CSS &鉻幫助,對老版本的Chrome瀏覽最後一個菜單項上新線呈現的,但在Firefox & &鉻的新版本的所有工作不錯。CSS:鍍鉻寬問題

屏幕(遠程調試): remote debug 桌面版Chrome: enter image description here 元素: enter image description here

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 */ 
+2

這是一個跨瀏覽器填充差異的問題。如果我是你,我會使用每個「li」的百分比寬度,否則你將不得不破解它像素完美(然後它不響應) – mattytommo 2014-12-08 09:39:44

回答

0

OMG O_O。我發現問題,在設備上缺少「PT Sans」字體。

0
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, image, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: top; } 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;} 
body {line-height: 1;} 
ol, ul { list-style: none;} 
blockquote, q { quotes: none;} 
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} 
table { border-collapse: collapse; border-spacing: 0;} 
b {font-weight:bold;} 
a {text-decoration:none; border:none;} 

使用你的CSS前,這條裂縫的CSS。

+0

沒有幫助修復 – IceJOKER 2014-12-08 10:06:19