styles 跨平台的差异（Windows 和 OSX）

Question

I have a antd table in react but the styles for it differ across platforms (Windows and OSX). The bottom line that separates two rows is not completely straight on Windows while it is straight on OSX. I've attached a picture for how it appears on Windows machine.

Has anyone faced a similar problem?

Answer 1

Looks like custom height got applied to 3rd and 4th column - Removing that height or setting it to auto might resolve issue.

If possible share css and html snippet.

Answer 2

Are you using same browser in both platforms? And is it a border of a cell?

I think you need to apply same CSS to all cells, with a min-width and a max-width , or just a fixed width .

Attention: look at your padding too, it's maybe the problem.

Answer 3

Did you try Normalize.css or reset.css for better cross-browser consistency?

I once faced some issues in safari/firefox browser but my layout was fine in chrome. So, I used reset.css to get rid of the inconsistencies.

index.css

@import url("./reset.css"); /* path to reset.css */
...
...
/* rest of your code */

(I posted this answer when OP had not stated whether the issue persists when using the same browser or using different browsers across the platforms)

PS: Either use reset.css or Normalize.css