Link to named anchor not working in IE - Have already tried suggested solutions on SO

I have a named anchor tag:

<table id="search_results" name="search_results">

I am linking to this like so:

pagename.php#search_results

This is working in Firefox and chrome, but 开发者_如何学Gonot IE (8).

I have tried using an <a> tag as suggested in some other posts. I have also tried to give the search results table the css:

display: inline-block

as suggested by one of the commenters on this article. My table always has content as well, which the article suggests can be the reason for IE rejecting it.

I'd be grateful for any suggestions.

Many thanks

That's how I was motivated to search for a different solution:

Added text was inappropriate for the display and the non-breaking space caused an extra line space to appear between the paragraphs. This could have been corrected, but the multi-MB pages would have required a lot of manual work.

The pages, developed with iPage, can be viewed here: www.theUB.org

I've been told by several professionals that such long pages are usually avoided in web site design, but these pages (with many named anchors and a "point & click" Table of Contents) seem to work well for this 2000-page public domain text.

One more disadvantage of the non-breaking space solution:

This online text needed to be read correctly by computer screen readers. Some people have commented on other blogs that screen readers voice the non-breaking space (or added text).

(Note the added decimal point after the paragraph numbers - this was necessary to prevent screen readers from voicing the merged paragraph number and first word of paragraph.)

Couple things:

IE8 does not support inline-block ;)

When you tried the a anchor, which is probably best, was your code something like

<a name="search_results"></a>
<table name="search_results" id="search_results">
</table>

The <a name=""> method is pretty much universally supported.

Firstly, using named anchors to navigate the page does what it says. You have you use a named anchor (<a> tag) to do it. Some browsers support it on non-anchors, but this is not universal and should not be relied upon - as you have discovered.

Secondly, are you sure you page is long enough? If the thing you are trying to link to is right at the bottom of the page, it won't display at the top of the viewport as you might expect, since there is nothing below it to display at the bottom of the page.

Thirdly, check that you did the named anchor correctly. You should be doing something like this:

<a name="search_results"></a>
<table name="search_results">
...

Regarding named anchors that do not require text:

Others have suggested this "workaround" for IE8: insert a "non-breaking space" character if no text is required ( ).

However, I also discovered that resetting my IE8's View/Zoom from 125% to 100% also activated the anchors that were not corrected with the "non-breaking space" solution. IE8's View/Text Size is not part of this problem.

Note: Large, text only, HTML pages were being tested: (font face="Verdana" size="+1"). These HTML pages displayed correctly in Firefox 15.01 without regard to View/Zoom,Text Size settings.

I've got this working by adding some text inside the anchor, like:

<a name="search_results">&nbsp;</a>

This appears to be another solution to the IE large file load delay: create a smaller HTML file which links via HREF to the large file (or to a bookmark (named anchor) in that file).

This test has been tried multiple times with the IE direct load of the large file always causing a long delay, but not when the user clicks the link in the small file to go to the large file.

Perhaps, IE is analyzing the primary file to see if it had already been loaded into the cache.

Note: This HTML file being tested is 11 MB (an entire book with many bookmarks and links to those bookmarks from other parts of this very long HTML page).

I faced the same problem on IE, Edge and chrome,

and I think the problem is because the encoding and decoding on the name attribute

so I did a workaround solution, take a look

anchorElem.on("click",function() {
            var href = $(this).attr('href');
            var scrollEle = $(".tocContent").find('a[name="' + href.substr(1) + '"]' + ', a[name="' + decodeURIComponent(href).substr(1) + '"]');
            if (scrollEle.length > 0) {
                $('html, body').animate({
                    scrollTop: scrollEle.offset().top
                }, 0);
                return false;
            }
        })

hope this help you

and happy solving browser compatibility issues