Carriage return causes a visual space in Internet Explorer 8

StackOverflow https://stackoverflow.com/questions/1965372

문제

A carriage return in my html code causes a visual space in the rendered html in Explorer 8. I'm guessing this will affect other versions too.

For example:

<span>
(111)&nbsp;
222-
3333&nbsp;
444444
</span>

looks like this:

(111)  222- 3333  444444

There should be only 1 space after the first bracket, no space after the dash and only 1 space after the last 3. I like the carriage returns for code readability, is it possible go keep then and still get the html to render properly in IE?

Here's the doctype information:

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

Edit:
I'm actually doing this in an ASP.NET MVC 2 app, and the aspx template markup is quite verbose which is why I've tried to seperate it into multiple lines:

<span>
(<%=((Model == null || Model.AreaCode == null) ? "" : Model.AreaCode).PadRight(3)%>)&nbsp;
<%=((Model == null || Model.Prefix == null) ? "" : Model.Prefix).PadRight(3)%>-
<%=((Model == null || Model.Suffix == null) ? "" : Model.Suffix).PadRight(4)%>&nbsp;
<%=(Model == null || Model.Extension == null) ? "" : Model.Extension%>
</span>
도움이 되었습니까?

해결책

This is a scenario where sprintf type functions really shine. In the .NET world these are handled by String.Format. Here's the MSDN documentation and you could rewrite the code something like this:

<span>
<%= String.Format("({0:###}) {1:###}-{2:####} {3}", Model.AreaCode, Model.Prefix, Model.Suffix, Model.Extension); %>
</span>

I'm a little rusty on the .NET string format syntax, so no guarantees on that code snippet. Here's another link:

http://blog.stevex.net/string-formatting-in-csharp/

다른 팁

in HTML, the Formfeed character (U+000C) is treated as white space, in XHTML

http://www.w3.org/TR/xhtml1/#C_15

Also http://www.w3.org/TR/xhtml1/#uaconf (point 9):

White space is handled according to the following rules. The following characters are defined in [XML] white space characters:

SPACE ( ) HORIZONTAL TABULATION ( ) CARRIAGE RETURN ( ) LINE FEED ( ) The XML processor normalizes different systems' line end codes into one single LINE FEED character, that is passed up to the application.

The user agent must use the definition from CSS for processing whitespace characters [CSS2]. Note that the CSS2 recommendation does not explicitly address the issue of whitespace handling in non-Latin character sets. This will be addressed in a future version of CSS, at which time this reference will be updated.

Not just in IE8. I've tested it with chrome and it gives the same result. First you need to remove the space from < span> < /span> element it self. and infact there are 2 spaces between (111) 222 and 3333 44444. So it seems that each carriage return is taking one blank space.

This is perfectly ok consider this HTML...

<html>
  <head>
  </head>
  <body>
    This is some static text
    with carriage return
    <span>
      (111)&nbsp;222- 3333&nbsp;444444
    </span>
  </body>
</html>

the output would be...

This is some static text with carriage return (111) 222- 3333 444444

Watch for the space between text and with in static text. So translating carriage return to space is seems like a general rule for HTML.

A newline is a space.

If you really want those things on separate lines, you could use HTML comments:

<span><!--
-->(111)&nbsp;<!--
-->222-<!--
-->3333&nbsp;<!--
-->444444<!--
--></span>

although that's not too great for readability either. Personally I don't see what's unreadable putting it all on one line. You could do:

<span style="white-space:nowrap">(111) 222-3333 444444</span>

if you feel the &nbsp;s are making it unreadable.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top