2013-10-01 3 views
2

В FireFox, когда код отформатированный с переносами, как так:Firefox LINEBREAK в коде создает промежуток между элементами

<div> 
    <ul> 
     <li>bullet</li> 
     <li>bullet</li> 
    </ul> 
    <ul> 
     <li>bullet</li> 
     <li>bullet</li> 
    </ul> 
</div> 

Существует пространство между этими элементами. Для того, чтобы избавиться от него, я должен поставить код на одну строку следующим образом:

<div><ul><li>bullet</li><li>bullet</li></ul><ul><li>bullet</li><li>bullet</li></ul></div> 

Есть ли способ избежать этого с некоторыми CSS магии?

EDIT: У меня есть сброс CSS:

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;} 
body{line-height:1;} 
ol, ul{list-style:none;} 
blockquote, q{quotes:none;} 
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;} 
table{border-collapse:collapse;border-spacing: 0;} 

с использованием HTML5 доктайп <!doctype html>

+0

с возвратом css? проверьте это [demo] (http://jsbin.com/UdOgekI/3/edit) – aldanux

+1

Невозможно воспроизвести на Firefox 24 с кодом, включенным в вопрос. Вы должны описывать конкретные непосредственно наблюдаемые различия, вместо того, чтобы просто сказать «Между этими элементами есть пространство» (какие элементы?). –

ответ

2

Предполагая, что я понимаю ваш вопрос, мой любимый способ сделать это:

уль { размер шрифта : 0 } ul li { font-size: 10px }

Дополнительная информация: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

+0

Используйте это или не помещайте перерывы между вашими элементами, как в вашем примере. – bmasterson

Смежные вопросы