日语Unicode字符使CSS浮动向左反转

Question

Please check out the following js fiddle in IE (I'm using 10)

http://jsfiddle.net/bF65u/1/

.inlineCol2 {
width: 50%;
    }
    .option {
        float: left;
}


<div id="Div_a799f1fc-ccbb-4c85-b367-a20300fe5a64" class="Div_ " >
    <div class="errorMsg"></div>
    <div class="surveyElementContent" title="">
        Why does this '箱' japanese character mess up my floats?
    </div>

    <div class="surveyElementOptions">
         <div class="surveyElementOption option inlineCol2 ">
            <input type="radio" value="1" /> 
            <label>1</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="2" /> 
            <label>2</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="3" /> 
            <label>3</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="4" /> 
            <label>4</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="5" /> 
            <label>ゴミ箱</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="6" /> 
            <label>6</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="7" /> 
            <label>7</label>
        </div>
    </div>
   </div> 

the radio button divs should be floated left, but they are floating right instead. However if I remove that last Japanese character in the 5th radio button it now floats correctly to the left. This only happens in IE. Can anyone offer a work around?

Answer 1

Is it possible you have your browser set to a specific encoding?

In IE, Go to View -> Encoding click "Auto-Select" and relaod the stylesheet.

Answer 2

What happens here is not alignment to the right but a disturbance in the alignment to the left: if you add more li elements at the end, they will be properly set.

I cannot analyze the ultimate cause of the problem, but it seems to be related to fonts, perhaps due to the fact that IE picks up the Japanese characters from a font other than the one used for texts in general. This means that the problem can be fixed by setting the font to one that contains the Japanese characters needed, eg

li { font-family: MS PGothic; }

In practice, you would need to study which commonly available fonts on Windows contain Japanese characters and write a suitable list, rather than a single font family name, to cover different setups.