Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What if the effect of DIV+CSS Padding is different between Firefox and IE?

2025-04-04 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article will explain in detail how DIV+CSS Padding works differently in Firefox and IE. Xiaobian thinks it is quite practical, so share it with you as a reference. I hope you can gain something after reading this article.

DIV+CSS Padding works differently in Firefox and IE

Introduction to CSS padding properties

First let's look at the introduction to CSS padding properties, which define the padding of an element. The padding property accepts either a length value or a percentage value, but negative values are not allowed.

For example, if you want all h2 elements to have padding of 10 pixels on each side, just do this:

h2{padding:10px;} You can also set the padding for each side separately in order of top, right, bottom, and left, and each side can have different units or percentage values:

h2{padding:10px0.25em2ex20%;}

Question:

test

The above code will have different effects in IE and Firefox. The main reason is that Firefox interprets padding-top differently from IE

Firefox to DIV total height is padding-top+height, and IE,padding-top is included in the height, to solve this contradiction, you can use! important

padding-top:5px; height:10px ! important; height:15px;

The above defines two heights, one of which is followed by! Important , IE will ignore this attribute and use the height:15px; Firefox will not ignore this attribute and use the height:10px directly, which can solve this problem very cleverly.

About "DIV+CSS Padding in Firefox and IE under the effect of how to do" This article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report