Geek Answers Handbook

Prevent selection in PRE with space: nowrap is one line in IE

In Internet Explorer, PRE with white-space:nowrap calls the code in PRE on the same line when I use prettify ( http://code.google.com/p/google-code-prettify/ ).

Isn't <br/> supposed to create a new line in PRE ? I checked the HTML source generated by prettify after the page loads and generates <br/> when it encounters newline characters.

See http://blog.mikecouturier.com/2009/12/google-street-view-with-google-maps_27.html for an example.

This does not happen in FF and Chrome.

thanks

EDIT: Perhaps this is due to this: Inserting a new line into a preliminary tag (IE, Javascript)

+4
source share
2 answers

From Internet Explorer innerHTML Quirk :

The innerHTML property for HTML elements is well known and widely used. It is able to set the full content of an element in one go, including elements and the like. As QuirksMode Tests showed, innerHTML is the fastest way to dynamically change page content.

However, innerHTML has a problem in Internet Explorer.

The HTML standard requires conversion when displaying content. All kinds and quantities of contiguous spaces collapse into one space. This is good - just like an example, it allows me to add many line breaks to this source file without worrying about weird line breaks in the displayed text.

Internet Explorer applies these transformations when assigning innerHTML. This seems like a good idea: it saves a little time during display, because if the view in memory is already normalized, then the browser should not normalize when it needs to display text.

There are exceptions to normalization. It should be noted that this is a <textarea> element, a <pre> element and in the CSS value of browsers, elements with any value, but normal for the white space property.

Internet Explorer does not respect these special cases. The third one makes optimizing them - a bad idea, because the space can change at runtime, for example, through the DOM. In either case, Internet Explorer normalizes all assignments to the innerHTML property.

This is another IE only “error” (even if it was they who invented innerHTML). In the first link, you have solutions to this problem, but as Lucas remarked, everything seems to point to a Google code that you do not control.

+4
source

Hi, you're right, in versions of IE6 and IE7, the code for the pre tag is displayed in 1 line. I added this small fix only for IE6 and 7 browsers.

I tested it and it works fine, it is a bit hacked because I actually replace the <br> tags with <p> tags, but this does not cause any visual differences in IE6 and 7 browsers.

You can add this piece of code anywhere in your HTML page. It uses jQuery.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ // this BR issue seems to happen only in browser // msie version 6.0 and 7.0 if($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0")) { // replace all <br>s in the .prettyprint section // with <p> tags. <p> tags have the same visual behavior as <br> tags // in IE 6 and 7 $(".prettyprint br").each(function(){ $(this).replaceWith($("<p></p>")); }); } }); </script>

This is probably your best bet until Google fixes the code for IE6 and 7.

+2
source

More articles:


All Articles