Spacing differences between IE7 and Firefox/Opera/Chrome

萝らか妹 提交于 2019-12-14 03:51:45

问题


I have an ongoing issue with the amount of vertical space of unordered lists in IE7 vs. Firefox/Chrome/Opera and I can't seem to find a solution out there.

In IE7, the space is less and what I would like to see.

In Firefox, Chrome, and Opera, the space between is about twice as much.

I can't account for any of the spacing issues in my code or page. On my page, the code looks like this:

<!--BEGIN SIDEBOX-->
<div id="sidebox_new">
<div id="sidebox_top"><div id="sup">SUPPORT LINKS</div></div>
<div id="sidebox_bod">
<br />
<ul>
<li><a href="training.aspx">User Training</a></li><br /><br />
<li><a href="faqs.aspx">FAQ</a></li><br /><br />
<li><a href="logonasst.aspx">Logon Assist. Center</a></li><br /><br />
<li><a href="faxus.aspx">Fax Us</a></li><br /><br />
<li><a href="callus.aspx">Call Us</a></li><br /><br />
<li><a href="feedback.aspx">General Feedback</a></li>
</ul>
</div>
<div id="sidebox_btm"></div>
</div>
<!--END SIDEBOX-->

My CSS for this section looks like this:

#sidebox_bod
{
width: 200px;
margin: 0 30px 0 0;
padding: 0;
background: url('../img/supbxbod.gif');
background-repeat:repeat-y;
background-position:bottom;
}

#sidebox_bod ul
{
list-style-image:url('../triangle.gif'); 
text-align:left;
padding: 0 0 0 30px;
margin: 0;
}

#sidebox_bod ul li a
{
font-size: 13px;
}

Any idea what I can do to try to have the vertical spacing the same across all browsers? I would prefer to have the IE7 look to try to fix this. Thanks.


回答1:


The problem you are having right now is due to the fact that each user-agent (Browser) has their own default styles, which may differ from one and the other.

Reset stylesheets exists in order to neutralize those styles and achieve a more constant rendering between user-agents. This will basically remove the issue with all elements.

In that particular case, playing with margin, padding and line-height of #sidebox_bod ul li will fix your problem:

#sidebox_bod ul { margin: 0; padding: 0 16px; line-height: 1em; }

I would recommend using a Reset CSS though, as that will solve most of those problems for all elements.




回答2:


Using break tags in between your list items is not a good idea. You should be setting specific margin, padding and/or line-height styles for your list item spacing - otherwise it will be unpredictable.

I'd recommend against using 'ems' for measurement if you want exact symmetry, as they are rendered very differently in different browsers and operating systems.

There are also some white space issues in IE, but usually that would result in more space, rather than less...

Regarding the above poster's comment about reset stylesheets - I think it would be better in this instance to set a specific style for your own site. Reset stylesheets can become largely unnecessary/redundant if you are styling your site at all (ref: http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/)

A link to your site would be great, as its very difficult to debug without seeing the entire CSS file and html context.



来源:https://stackoverflow.com/questions/2561007/spacing-differences-between-ie7-and-firefox-opera-chrome

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!