jquery mobile grids 's bug ??

jquery mobile grids 's bug ??

  1. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>test</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    </head>
    <body>
    <div data-role="page" id="page-home">
        <div data-role="content">

            <div class="ui-grid-b" style="background:red;">
                <div class="ui-block-a"><div style="background:gray;height:60px">Block A</div></div>
                <div class="ui-block-b"><div style="background:gray;height:60px">Block B</div></div>
                <div class="ui-block-c"><div style="background:gray;height:60px">Block C</div></div>
            </div>
           
        </div>
    </div>
    </body>
    </html>
























please try the code above using chrome or firefox or ie9.

the result is :

I looked for the css of jqm,and found the code below:

  1. .ui-grid-b > :nth-child(n) {
            width: 33.333%;
            margin-right: -.5px;
    }


The blocks will fill in the grid container when I change '-.5px' to '0px'.

who can help me resolve this problem? what problems will happen if I changed the css code?

Thanks!