Encoded URL with square brackets. Different behaviour in Chrome/Firefox/IE

Question

I have a link looking like this (it's a bit ugly because it is URL )

<a href="/items?fc%5B%5D=12345&amp;fc%5B%5D=56789&amp;utf8=%E2%9C%93">foo</a>

To be a bit clear, it is URL encoded and translates to

<a href="/items?fc[]=12345&fc[]=56789&utf8=✓">foo</a>

When the form is submitted, the destination URL looks different in different browsers:

In Firefox, it looks like desired:

http://mydomain/items?fc[]=12345&fc[]=56789&utf8=✓

In Chrome, the square brackets are shown URL-encoded, (which gives very ugly and non-professional looking addresses when using many of them).

http://mydomain/items?fc%5B%5D=12345&fc%5B%5D=56789&utf8=✓

In IE9 (and older) everything is showed URL-encoded:

http://mydomain/items?fc%5B%5D=12345&fc%5B%5D=56789&utf8=%E2%9C%93

I can live with the "utf8=..." part, since it's only a problem in IE. But none of the browsers has any problem with handling when square brackets are explicitly typed into the URL, so i don't understand why Chrome and IE, but not Firefox has to show the brackets with URL encoding.

Since the form's html code is same in all browsers, i suppose that is has to do with the browsers, and not with the site (a Ruby on Rails site in this case)

EDIT: So to clarify my actual questions: Why is this different? Is there a way to make it look good in at least Chrome? It can be ugly-fixed by not URL-escaping in the href="..." but i suppose that is against URL encoding rules?

Answer 1

As you want to share these links (with statefulness) I presume you're anticipating your links will be shared, linked from web pages, copied, emailed etc.

It's likely that even outside of the browser (say, where your links are copied into other pages, into emails and so on) that some encoding will occur. You may have to accept ugly will appear somewhere if you have to use those characters.