Отличие работы кода в Mozilla и Chrome

На этот вопрос есть ответ на stackoverflow.com

Похоже, Firefox следует рекомендациям W3C:

Content model: Phrasing content, but there must be no interactive content descendant.

То есть <button> может содержать Phrasing content - текст и/или один или несколько элементов из списка:

a, abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, text

Но контент внутри <button> не может быть интерактивным. В рекомендациях W3C описано что есть интерактивность. Интерактивными элементами могут быть:

a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)

Эти элементы имеют activation behavior, который определяет механизм активации элемента.

Когда пользователь кликает по элементу, происходит поиск ближайшего интерактивного элемента - начиная с элемента, по которому кликнули, вверх по дереву ищется первый элемент с activation behavior. Если такой элемент найден, ему отправляется событие click.

В вашем примере <i> не является интерактивным. А ближайшим интерактивным является <button>, поэтому события click срабатывает на <button>.

В качестве решения, можно использовать <div> или <span> стилизованный под <button>