开发者

Vertical Spacing in IE 7,8,9 within a Div

I have a div tag with a few other elements inside of it, as follows:

<div>
  <h3>Text</h3>
  <hr/>
  <ul>
    <li>Text</li>
  </ul>
  <hr/>
  <span>Text</span>
</div>

Between each different element in the div, I have 0 padding and margins set for all of the elements (and it is reflected in the developers tools), however in all Internet Explorer browsers there is a significant space (roughly 4-6 pixels) between each element. I've tried setting the html, body padding/mar开发者_运维问答gins to 0, as well as pretty much every other element above it in the DOM hierarchy, however the spacing remains. I've also tried minimizing the HTML so there are no new-lines or spaces, however it does not resolve the problem.

Any suggestions what could be the problem?


I guess the issue is the hr element in IE... it's not treated like other HTML elements. There are a number of solutions out there... but I couldn't get any of them to work when you want to decrease the margins.

That being said... through trial and error I managed to get negative margins for IE only rendering to work. Can't be sure it'll work in IE<6, IE7, IE>8 (can't test).

The minimal CSS code fragment:

<style>
   hr {padding:0;margin:0;height:1px;border:none;color:#000;background-color:#000;}
</style>
<!--[if lte IE 8]>
<style>hr {display:block;margin:-7px 0;}</style>
<![endif]-->

... I've limited it to IE8 and less since word on the web is things will change in IE9... we'll see once it can be tested :). Note if you want to change the colour of the line, you'll need to change values of color and background-color (depending on the browser one or the other is used: ref)

Tested and working in:

  1. IE 8.0.6001...
  2. IE 6.0.2900...
  3. FF 3.6.15
  4. Cr 10.0.648.134

(on WinXP)


The space you are seeing is not padding, margin or border. You are seeing the " " character written that exists between each tag.

Options:

1) Set all elements to display:block or display: inline-block. 2) Write all the tags one after the other, dismissing all SPACE or ENTER characters

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜