No, websites do not need to look exactly the same in every browser, but while styling a details/summary element recently, I thought I had found smart way to make the default "open/closed" markers behave visually a bit nicer without resorting to re-invent several wheels and hacking my way with "::before" contents:

.acc-trigger {
	list-style-type: none;
}
.acc-trigger .section__heading {
	color: #900;
	cursor: pointer;
	display: inherit;
	list-style-type: disclosure-closed;
	list-style-position: inside;
}
.acc-item[open] .section__heading {
	list-style-type: disclosure-open;
}
.acc-item .content {
	margin-left: 1.25em;
}

Problem is: even without looking at another platform, Firefox, Safari and Chrome on my Mac can't find a common ground on how this should be rendered.

Firefox is spot on to my intentions:
A red triangle sits nicely inline with the summary's heading.

Safari comes close, but missing the red color on the triangle, but Chrome, well, Chrome has it's own ideas about my styles, and decides to put the triangle above the summary:

Screenshots; Firefox: Red triangles inline/next to the summary. Safari: Darkgrey trianlges inline as well. Chrome: Darkgrey triangles above the summary

Damn. Needs more tweakage, it seems.

Update: While fiddling around with the above code-pen, it dawned on me: Is there a need for the "h2" heading? Isn't the "summary" element in itself a "heading" of sorts?
So I changed the html markup and the according css, and now it works much better across the three browsers, and since there's no need to "inherit" the open/close triangle stuff to the headings, the resulting css is less complex.

.acc-trigger {
	color: #900;
	font-weight: bold;
	font-size: 1.5em; /* mimic h2 style */
	cursor: pointer;
	list-style-position: inside;
}
.acc-item .content {
	margin-left: 1.25em;
}

*) Do Websites Need To Look Exactly The Same In Every Browser?