html - Inconsistent spacing in different browsers -

i need create simple calendar design. problem is, cannot change html markup, created php script. calendar created unordered list, each li-tag represents 1 day.

from left right, these google chrome, mozilla firefox , internet explorer:

i want each of them chrome-example (i remove unnecessary border right afterwards). have tried lot of things solve this, negative margin instance - of course changed in chrome. according this article caused spaces, tabs , linebreaks between li-tags, half truth.

i figured out, creating script returns list without spaces in between. true days, not heading - don't ask why, don't know either... see code below example.

<li class="day first">mo</li> <li class="day">tu</li> <li class="day">we</li> <li class="day">th</li> <li class="day">fr</li> <li class="day">sa</li> <li class="day">su</li><li class="first outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="past">1</li><li class="first past">2</li><li class="past">3</li><li class="past">4</li><li class="past">5</li><li class="past">6</li><li class="past">7</li><li class="past">8</li><li class="first past">9</li><li class="past">10</li><li class="past">11</li><li class="past">12</li><li class="past">13</li><li class="past">14</li><li class="past">15</li><li class="first past">16</li><li class="past">17</li><li class="past">18</li><li class="past">19</li><li class="past">20</li><li class="past">21</li><li class="past">22</li><li class="first past">23</li><li class="past">24</li><li class="past">25</li><li class="today">26</li><li class="future">27</li><li class="future">28</li><li class="future">29</li><li class="first">30</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li></ul></div></div> 

---

this second firefox example, without space between days. can see, solved problem, there's still space between heading, it's not perfect. doesn't work internet explorer however, no matter whether have spaces or not, still has offset between each element.

here's jsfiddle-exampe of code. remember, cannot change html markup!

i hope can me make them consistent.

if can't change html @ all, 1 solution use floats instead of inline-block elements margin between elements doesn't depend on font-size or spaces in html markup.

i tested demo in latest versions of ie, ff , chrome , have same rendering.

.calendario ul li {     float:left;     list-style-type:none;     ... } 

to prevent layout issues, need clear floats. in demo use pseudo selector on <ul> element :

.calendario ul:after{     content:'';     display:block;     clear:both; }