i have a page with a sort of tag cloud section on it. the markup for said cloud is something similar to this..
<div class="Con开发者_运维问答tentColumnB">
<div class="tagcloud">
<p>
<span style="font-size: larger;">Office 2010 Issues </span>
<span style="font-size: x-large;">Windows 7 </span>
<span>SharePoint </span>
<span style="font-size: large;">Migration Management Tools</span>
<span style="font-size: small;">75% Upgrading </span>
<span style="font-size: smaller;">Desktop Virtualisation</span>
<span style="font-size: x-large;">Microsoft Jump Start </span>
<span style="font-size: medium;">Buying Solutions</span>
<span style="font-size: large;">What-if Planning</span>
</p>
</div>
</div>
here is the associated css
.ContentColumnB {
height:85px;
padding:5px 10px;
width:460px;
}
.tagcould p{
color:#6192B6 !important;
text-align:justify;
}
div.tagcloud span {
color:#6192B6 !important;
display:inline !important;
padding:0 3px;
word-wrap:break-word;
text-align:inherit;
}
as usual I am having problems with IE, IE7 to be precise. it refuses to split the spans with the style tag onto seperate lines : so migration management tools for instance in FF and IE8 the word migration is on one line and the management tools is on the next. for IE 7 however if refuses to stick the latter words on a new line and hence fits a great deal less in the block. this is generated by a WYSIWYG editor, so the solution wont be to change the way the markup is generated.. here is what IE looks like : http://www.dumpt.com/img/viewer.php?file=cgyd1xbpig61kr39kn74.gif
and FF: http://www.dumpt.com/img/viewer.php?file=iuw5o3cgl5k52m5i1afw.gif
taking the justify off doesnt make any difference to the wrapping either ( i put that in so it at least didnt look all squished over to one side).. why is it that a span wont run over 2 lines? clearly im missing something... just to confirm that IE8 is ok and of course FF is too.
any suggestions?
thanks
nat
it seems the problem related to an inherited zoom:1; so in order to avoid one IE bug I ran headlong into another
zoom:0 on the span, all is well
nat
You say removing style="font-size:whatever" also removes the problem?
You could run a small javascriptscript replacing the style="font-size:whatever" for something that will accomplish the same visual effect, but not the problem.
精彩评论