Comportement CSS macOS vs windows

**rlelamer** · 24/06/2018, 22h46

Bonsoir,

J'aimerais comprendre et pouvoir résoudre quelque chose que je maitrise pas du tout ...

J'ai ce code html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Time</th>
                        <th title="Timezone">TZ</th>
                        <th>Position</th>
                        <th title="Time To Waypoint">TTW</th>
                        <th title="Distance To Waypoint">DTW</th>
                        <th title="Distance To Go">DTG</th>
                        <th title="True Wind Direction">TWD</th>
                        <th title="True Wind Speed">TWS</th>
                        <th title="True Wind Angle">TWA</th>
                        <th title="Bearing To Waypoint - Heading">BTW</th>
                        <th>Sail</th>
                        <th title="Speed Through Water - Boat speed">STW</th>
                        <th title="Average True Wind Angle">ATWA</th>
                        <th title="Average Bearing To Waypoint">ABTW</th>
                    </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
        </div>
        <br>
        <div id="localtimeDiv">
            <input type="checkbox" id="localtime" tabindex="-1">
            <label>Local Time</label>
        </div>
        <div id="versionDiv">
            <label>Version</label>
            <label id="version"></label>
        </div>
        <div id="gpxDiv">
            <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
        </div>
        <br>
        <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
    </body>
    <script src="bundle.js"></script>
</html>

et ce code CSS

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body {
    font-size: 11px;
    margin: 5px;
}
 
.table-wrap {
    border: 1px solid black;
}
 
.table-wrap table {
    text-align: center;
}
 
.table-wrap table th, .table-wrap table td {
    border: 1px solid black;
    padding: 1px;
    white-space: nowrap;
}
 
tr:hover td {
     background-color: lightgray;
}
 
tr {
     background-color: white;
}
 
#localtimeDiv {
    float: left;
}
 
#versionDiv {
    float: right;
}
 
#gpxDiv {
    margin: 0 auto;
    text-align: center;
}
 
#gpxOutput {
    width: calc(100% - 5px);
    resize: none;
}

Le rendu sur Google Chrome macOS donne ceci:

Le rendu de ce même code sur Google Chrome Windows donne ceci:

Ce que je comprends pas :
- La partie blanche à droite sur le screen de Windows (dans le tableau), sous macOS tout est clean ...
- la police du bouton GPX qui est en 13,333px alors que sous mac elle est à 11px.
- la police de textarea qui est également en 13,333px alors que sous mac elle est à 11px.

Qu'est ce que j'ai mal fait pour que c'est 3 points existent sous windows et pas sous mac ? Comment corriger le tir ?
Merci

Invité · 24/06/2018, 23h50

Bonjour,

1- Les typos et tailles de caracteres sont différentes.
Il faut les définir (sinon, ce seront les valeurs par défaut de chaque navigateur)

2-

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.table-wrap table {
    width: 100%;
}

Sinon, la table s'adapte à la largeur de son contenu.

**rlelamer** · 25/06/2018, 00h00

Bonsoir jreaux62,
T'es un chef ça fonctionne comme je le souhaite, merci

Peut on attribuer 11px a la police du bouton ainsi qu'au texte de textarea ?

**rlelamer** · 25/06/2018, 00h25

J'ai trouvé pour la zone de texte (c'était pas compliqué au final ...)

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#gpxOutput {
    width: calc(100% - 5px);
    resize: none;
    font-size: 11px;
}

En revanche je bloque pour le bouton lui même ...

Si tu peux m'orienter vers la solution ou un autre membre je suis preneur, merci

**rlelamer** · 25/06/2018, 01h21

J'ai trouvé en cherchant sur le net

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
        <div id="gpxDiv">
            <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
        </div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.cssButton {
    font-size: 11px;
}

Comportement CSS macOS vs windows

CSS

Discussions similaires

Partager

Partager