CSS don't work properly in Chrome / Edge, but do in Firefox-CodePudding

The pseudoelemt e.g. is not positioned correctly in Chrome

The html:

<table id="new_ar_wrp">
  <tr  data-month="7" data-meta="s" style="color: rgb(249, 109, 66);">

    <td>
      <input  type="text" value="blablabla" readonly="readonly">
    </td>

  </tr>
</table>

(The html is generated by javascript and inserted dynamically)

The corresponding CSS:

#new_ar_wrp > tr > td > input,{
  box-sizing: border-box;
  padding: 5px;
  padding-right: 5px;
  background: transparent;
  color: #aaa;
  border: none;
  border-bottom-color: currentcolor;
  border-bottom-style: none;
  border-bottom-width: medium;
  border-bottom: 1px solid;
  margin-bottom: 10px;
  font-size: 17px;
  padding-right: 12px;
  width: 265px;
}

.new_ar_wrp_tr_has_timer > td:nth-child(1) {
padding-left: 10px;
}
.new_ar_wrp_tr_has_timer > td:nth-child(1)::after  {
  content: '';
  background-color: rgb(249, 109, 66);
  position: absolute;
  width: 5px;
  height: 30px;
  left: 0;
  border-radius: 10px;
}

What could be the reason for this?

CodePudding user response：

How browser render something will vary according to its engine. Chrome and Edge shares the same webkit engine. I'm not a specialist on browser spec, so can't comment more on it.

But when it comes to your bug, I think that you're trying to align your ::after with respect to the td, so for that you should add position relative to .new_ar_wrp_tr_has_timer > td:nth-child(1) to make that happen.

Also specify the top property for the ::after. You're leaving it up to the browser to decide by not specifying it. I think top: 0; is apt for your case.

Also box-sizing should be declared globally and not for each element like following

*, *::before, *::after {
box-sizing: border-box;
}

CodePudding user response：

Because I have not found a way to change this via css I check now only the browser when loading and load (if necessary) a small seperate css.

Fix js:

var ie = /*@cc_on!@*/false || !!document.documentMode;
var edge = !ie && !!window.StyleMedia;
var chrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
var edge_chrome = chrome && (navigator.userAgent.indexOf("Edg") != -1);

if (edge || chrome || edge_chrome) {
    var head = document.getElementsByTagName('HEAD')[0];
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '/path/to/chrome_edge_fix.css';
    head.appendChild(link);
}

chrome_edge_fix.css:

.new_ar_wrp_tr_has_timer>td:nth-child(1)::after {
    margin-top: -40px !important;
}

Sorry for the late answer