border-radius werkt niet in IE11 op windows10
de code hieronder toont een login scherm. Dit scherm wordt overal correct getoond behalve bij IE11 op windows10. Een IE11 op windows7 toont alles zoals het hoort. Kan iemand helpen?
Dank bij voorbaat!
Code (php)
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<title>E-services DVC Heilig Hart</title>
<link rel="stylesheet" type="text/css" href="./css/huisstijl.css">
<style>
body
{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#logo
{
width:198px;
height:147px;
float:left;
margin: 1em;
}
form
{
border: 2px solid rgb(38,136,142);
border-radius:10pt;
width:600px;
height:300px;
}
ol
{
float:left;
margin-top:25px;
}
li
{
list-style-type:none;
margin:8pt;
}
label
{
font-family:verdana;
font-size:10pt;
width:110px;
float:left;
}
#gebruikersnaam
{
width:150px;
}
#paswoord
{
width:150px;
}
.button
{
color:white;
font-size:10pt;
font-weight:bold;
height:25pt;
background-color:rgb(192,154,0);
border-radius:25px;
cursor:pointer;
width:120px;
}
.helpbutton
{
color:white;
font-family:verdana;
font-size:16pt;
height:25pt;
background-color:rgb(192,154,0);
border-radius:25px;
cursor:pointer;
width:25pt;
margin-right:5px;
}
</style>
</head>
<body>
<section>
<form method="post" action="index.php">
<h2 class="h2paars">Inloggen E-services </h2>
<img src="./images/dvctrans.png" id="logo" alt="logo DVC Heilig Hart">
<ol>
<li><label for="gebruikersnaam">Login</label>
<input type="text" name="gebruikersnaam" id="gebruikersnaam" autocomplete="on">
</li><li>
<label for="paswoord">Paswoord</label>
<input type="password" name="paswoord" id="paswoord">
</li><li>
<input type="submit" value="OK" id="inloggen" name="inloggen" class="button">
<input type="reset" value="opnieuw" id="reset" name="reset" class="button">
</li>
<li>
<button type="button" class="helpbutton" title="handleiding wijzigen paswoord">?</button><a class="standaard" href="">wachtwoord vergeten</a>
</li>
</ol>
</form>
</section>
</body>
</html>
<html>
<head>
<title>E-services DVC Heilig Hart</title>
<link rel="stylesheet" type="text/css" href="./css/huisstijl.css">
<style>
body
{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#logo
{
width:198px;
height:147px;
float:left;
margin: 1em;
}
form
{
border: 2px solid rgb(38,136,142);
border-radius:10pt;
width:600px;
height:300px;
}
ol
{
float:left;
margin-top:25px;
}
li
{
list-style-type:none;
margin:8pt;
}
label
{
font-family:verdana;
font-size:10pt;
width:110px;
float:left;
}
#gebruikersnaam
{
width:150px;
}
#paswoord
{
width:150px;
}
.button
{
color:white;
font-size:10pt;
font-weight:bold;
height:25pt;
background-color:rgb(192,154,0);
border-radius:25px;
cursor:pointer;
width:120px;
}
.helpbutton
{
color:white;
font-family:verdana;
font-size:16pt;
height:25pt;
background-color:rgb(192,154,0);
border-radius:25px;
cursor:pointer;
width:25pt;
margin-right:5px;
}
</style>
</head>
<body>
<section>
<form method="post" action="index.php">
<h2 class="h2paars">Inloggen E-services </h2>
<img src="./images/dvctrans.png" id="logo" alt="logo DVC Heilig Hart">
<ol>
<li><label for="gebruikersnaam">Login</label>
<input type="text" name="gebruikersnaam" id="gebruikersnaam" autocomplete="on">
</li><li>
<label for="paswoord">Paswoord</label>
<input type="password" name="paswoord" id="paswoord">
</li><li>
<input type="submit" value="OK" id="inloggen" name="inloggen" class="button">
<input type="reset" value="opnieuw" id="reset" name="reset" class="button">
</li>
<li>
<button type="button" class="helpbutton" title="handleiding wijzigen paswoord">?</button><a class="standaard" href="">wachtwoord vergeten</a>
</li>
</ol>
</form>
</section>
</body>
</html>
Heb je alle andere mogelijke oorzaken uitgesloten zoals caching, niet kloppende HTML/CSS (indien er fouten in het document zitten werkt potentieel niets zoals je zou willen). Heb je het document al door een validator gehaald?
NB: Als ik de statistieken op die pagina mag geloven is IE 11 een browser uit 2013 (!). En wordt (globaal) gebruikt door ~2.26% van de wereldwijde populatie (!).
Heb deze code alvorens ze te posten door de validator van W3C en deze geeft mij enkel de sugestei om bij mijn doctype ook nog een naam te zetten.
Voorlopig staat deze code nog op een wamp64 en eens alles oké, zal ik hem online plaatsen. Kan dit een verschil maken?
Nogmaals dank voor de feedback
Tenzij het om een pad naar de CSS-file gaat, wat bijvoorbeeld niet gevonden is.
Probeer de volgende meta-tag toe te voegen (in de <head> uiteraard), en kijk of dit helpt?
Code (php)
1
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Anders zul je even verder moeten graven.
Google: ie 11 render mode
> How To Deal With IE (Internet Explorer) 11 Render Issues
> why is IE11 choosing render mode: “IE7 Strict” and how to i make it use current browser?
>> What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?
Mogelijk enigszins gedateerd, maar dat is IE11 ook ;)
Gewijzigd op 12/03/2019 14:53:29 door Thomas van den Heuvel
De Clercq Andy op 12/03/2019 14:10:36:
Dit scherm wordt overal correct getoond behalve bij IE11 op windows10. Een IE11 op windows7 toont alles zoals het hoort.
Ik zie de border-radius wél in Internet Explorer 11 onder Windows 10.
Reuze bedankt voor deze dijk van een tip, ik ga er vanuit dat ik deze in de toekomst best overal standaard toevoeg in mijn header.php.
Of kan dit tot problemen leiden?
Het zorgt er enkel voor dat oudere IE browsers geïnstrueerd worden om de webpagina op een zo modern mogelijke manier op te bouwen. Voor zover ik weet kan dat geen kwaad.