我有一个问题,我正在制作一个网页,我在网页的几个部分中使用了text-align:justify布局,所有的浏览器都可以正常工作,但是在Opera浏览器中却出现了混乱和超出边界的情况。菜单中的一些链接在左侧出现,但不能被选中,换句话说,它们似乎不是链接。为了让li元素与ul相匹配,我使用了一个hack,并添加了一个额外的li span class="strecth" >。我认为这是一个众所周知的hack,使用HTML标签来实现。
font-size:0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines
在ul元素中,以及。
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
在li元素中。 那么问题是什么?没有问题。这是解决方案,可以在Opera中使其正常工作。我有一个菜单包装器,它具有font-size:0px,ul元素位于id为“#menu”的nav内,该nav也具有font-size:0px。
#menuwrapper{ max-width:970px;
margin:20px auto 0px auto;
font-size:0px;
text-align:left;
padding:0px;}
#menu ul{ padding:0px;
margin:0px;
clear:both;
font-size:0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;}
测试后发现字体大小是问题所在,但如果我更改它,页面的其余部分也会改变,因此我只更改了opera浏览器的字体大小:noindex:-o-prefocus,#menu ul {font-size:1px;} 以此方式。
#menuwrapper{ max-width:970px;
margin:20px auto 0px auto;
font-size:0px;
text-align:left;
padding:0px;}
noindex:-o-prefocus, #menuwrapper {font-size:1px;}
#menu ul{ padding:0px;
margin:0px;
clear:both;
font-size:0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;}
noindex:-o-prefocus, #menu ul{font-size:1px;}
实际上,父元素必须有 font-size:0px 才能让 text-align: justify 生效。就是这样,请谅解我的英语不太好,毕竟不是我的母语。