css design varying from browser to browser why?

Question

I am using the below CSS , HTML code for displaying an L shape before a span. But its shape is varying from browser to browser.

In Google Chrome and

In Internet Explorer

.bulletInline::before {
  font-family: Roboto, sans-serif;
  text-align: center;
  text-decoration: none;
  margin-right: 0px;
  display: inline-block;
  font-weight: bolder;
  font-size: 32px;
  width: auto;
  height: auto;
  color: #BABABA;
  content: ' ⌞ ';
}

<dl>
  <dt>
      <span class="bulletInline"> </span>
   </dt>
</dl>

What do you mean by Varying? They look the same to me in Chrome and IE11 — Nope, Mar 07 '17 at 11:58
Came across this, maybe it helps ► [**Unicode special characters appear differently in Firefox vs. Chrome/IE**](http://stackoverflow.com/questions/4633443/unicode-special-characters-appear-differently-in-firefox-vs-chrome-ie) and — Nope, Mar 07 '17 at 12:01
When I run the code snippet in Chrome , Firefox , IE. I got three different L shape (I mean their font weight) — Vishnu Sadanandan, Mar 07 '17 at 12:03
Have a look at the linked SO, one of the answers mentions that to control fonts better is to not use special characters but use a font family that has them and use that instead. i.e: When using `Webding` as font, an `a` turns into a checkmark etc.. — Nope, Mar 07 '17 at 12:05

score 0 · Answer 1 · answered Mar 07 '17 at 12:05

0

You can reset css/normalize it using something like Normalize.css

Then apply your styles. This will make consistent appearance in most of the browsers.

answered Mar 07 '17 at 12:05

ajcodez

1
3

While that is true, when it comes to special characters like `☺☻♥♦♣♠` etc.. all bets are off as they are not "standard" characters, though a lot of them do happen to work. – Nope Mar 07 '17 at 12:07
@Fran Yeah! That's true!! – ajcodez Mar 07 '17 at 12:09

css design varying from browser to browser why?

1 Answers1