Is there a difference between
and

2019-01-23 11:00发布

Ran into a problem on my web page where the footer in the master page wasn't displaying correctly for one particular page. On that page, I had a

<div style="clear:both" /> at the bottom.

After banging my head at it for a while, I saw that all I needed to change to get the footer to show up properly was to change that line to:

<div style="clear:both"></div>

I don't understand why writing it this way should produce a different result. Aren't they semantically equivalent? I checked and double-checked that this was the only change I made. Flipping back and forth between the two would change the behavior of the footer.

So my question is... are those not equivalent? What's the difference between them?

Edit: The odd part is, they both do what I want to the stuff above them in the page. I mean, in the self-closing div tag's case, if I remove it entirely the page definitely reacts, so it must be doing SOMETHING with it and not just ignoring it completely.

标签: html xhtml
8条回答
放我归山
2楼-- · 2019-01-23 11:38

The first option is not valid html; the second is. <div /> really confuses IE, so always go for <div><div/>.

查看更多
乱世女痞
3楼-- · 2019-01-23 11:39

You would not be able to put content in a "<div />".

查看更多
我想做一个坏孩纸
4楼-- · 2019-01-23 11:45

self terminating tags are valid in XML, but not in this case for HTML

查看更多
来,给爷笑一个
5楼-- · 2019-01-23 11:47

It depends on the DOCTYPE that you're using.

For XHTML, which is XML, the two tags are equivalent. You would signal this to the browser by including one of the following DOCTYPEs as the first line in your page:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

For HTML 4.01, which is what all (?) browsers assume when there's no DOCTYPE, certain tags must be expressed as open-close. Most of the block-level tags require this, including such non-markup tags as <SCRIPT>. If you look at the WDG HTML documentation, you'll see whether a particular tag requires open-close or can be expressed as an empty tag, via the "syntax" item:

Syntax      <DIV>...</DIV>
查看更多
倾城 Initia
6楼-- · 2019-01-23 11:51

<div /> is valid depending upon your DOCTYPE It's valid XHTML Transitional & XHTML Strict

DEMO: http://wecodesign.com/demos/stackoverflow-1411182.htm

VALIDATION: http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

If you want to use a single tag and not have a useless empty <div> on the page, try using a <br /> for your clears.

<style type="text/css">
.clear-fix {
    float: none !important;
    height: 0 !important;
    overflow: hidden !important;
    clear: both !important;
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
</style>

<br class="clear-fix" />

Some may question my usage of !important here; however, this is the reason why it exists! We know that when we clear something, we want it to do a specific task no matter what.

Take for example:

<style type="text/css">
    .hidden {display: none;}
    #foo {display: block;}
</style>

<p id="foo" class="hidden">You can still see me</p>

In this particular case, you would add !important to your hidden class, because it's pretty clear that it's supposed to hide stuff no matter what

查看更多
混吃等死
7楼-- · 2019-01-23 11:55

<div /> is not a valid markup. A self-closing tag is not permitted.

You need to use the full version <div></div>.

A self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.

查看更多
登录 后发表回答