[bug] tauri program in different systems of web page layout, format is not consistent

[trookie2000]

Describe the bug

Below is the page generated by app.vue on win11： But when I ported the project to Kilin v10（linux），My interface looks like this,Font color, drop-down box format is also different，The drop-down box even went to a strange place How can I solve this problem?

Reproduction

No response

Expected behavior

Same as the interface diagram of win11

Platform and versions

cargo tauri info:
[] Environment
    - OS: Linux v10 X64
     webkit2gtk-4.0: 2.28.1
     rsvg2: 2.48.2
     rustc: 1.73.0 (cc66ad468 2023-10-03)
     cargo: 1.73.0 (9c4383fb5 2023-08-26)
     rustup: 1.26.0 (5af9b9484 2023-04-05)
     Rust toolchain: stable-x86_64-unknown-linux-gnu (environment override by RUSTUP_TOOLCHAIN)
    - node: 16.19.1
    - npm: 8.19.3

[-] Packages
    - tauri [RUST]: 1.5.2
    - tauri-build [RUST]: 1.5.0
    - wry [RUST]: 0.24.4
    - tao [RUST]: 0.16.5
    - tauri-cli [RUST]: 1.5.6
    - @tauri-apps/api [NPM]: 1.5.1
    - @tauri-apps/cli [NPM]: 1.5.6

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../dist
    - devPath: http://localhost:1420/
    - framework: Vue.js
    - bundler: Vite

Stack trace

No response

Additional context

No response

[trookie2000]

Figure 1 shows win11 and Figure 2 shows kylin v10~

[FabianLars]

This is likely a consequence of windows using chromium (like edge) and linux and macos webkit (like safari / epiphany).

The solution mainly depends on your component/css setup. Most frameworks have some kind of "css reset". There are also general ones like https://necolas.github.io/normalize.css/.

The reset typically helps here but there may still be platform differences depending on what css properties you use but that's hard to tell with just a screenshot.

If you're asking google etc looking for Safari solutions should also cover Linux.