Text-decoration line-through misaligned only on Safari/Mac-CodePudding

I'm trying to add a line-through, in all browsers it works fine, except Safari.

It gets misalignment.

I'm not even using css, just an stag inside the html

<span >
 <s>{value}</s>
</span>

CodePudding user response：

There is an issue with the line through and del they both are't working in safari I came up with an solution

.price--old {
      width: 25px;
      display: flex;
      align-items: center;
    }
    .price--old::before {
      content: "";
      flex: 1 0 10px;
      border-top: 1px solid #111;
    }
    .old-price {
      margin-left: -25px;
    }

    <div ><span >200</span></div>

its working completely fine in safari and chrome

CodePudding user response：

Every browser interprets CSS differently. I believe the reason it's not working is because the <s> tag "renders a horizontal line through the vertical center of the text," so I assume it's finding an odd "vertical center."

Per Apple's dev library:

s

Deprecated. Defines a block of text in strikethrough style. Use del to indicate document edits.

Discussion

The content inside the s element is rendered with a horizontal line through the center. The del element is more appropriate to show text that was removed. Styles should be more finely tuned using CSS instead of using HTML style elements when possible.

Availability

The s element has been deprecated in the HTML 4.01 standard.

Try using the <del> tag instead

<p>Let's try <del>this</del></p>

And let me know if that doesn't work. It looks ok on my computer in Safari, but I have some weird settings on my Safari for a work project rn.

A little more research shows that there is a semantic difference between del and s: What is the difference between <s> and <del> in HTML, and do they affect website rankings?

<s> and <del> both still exist in the HTML specification.
The <del> element represents a removal from the document.
The <s> represents contents that are no longer accurate or no longer relevant.
That is to say that they actually represent different things semantically. Specifically would be used if you had an existing document and wanted to indicate text that was in the document, but has been removed. This would be different than text in a document that is no longer accurate, but that has not been removed (you could use for that).

You should not use or depend on either for styling even though most browsers do have them strike-through by default. You should only rely on CSS for presentation.