vue is altering the styles of my html
Nov 19th 2021
Version
3.2.22
Reproduction link
Steps to reproduce
can be seen immediately.
What is expected?
the space in the middle of the buttons should be visible
What is actually happening?
the space in the middle of the buttons disappears
the problem does not happen if I use vue 2 (cdn)
html original:
<html>
<head>
<style>
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
a{
color: #007bff;
text-decoration: none;
background-color: transparent;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<a class="btn btn-secondary" href="/Register">Back</a>
<input type="submit" value="Save" class="btn btn-primary"/>
</div>
</div>
</body>
</html>
Nov 20th 2021
duplicate of #2431
Nov 20th 2021
https://github.com/vuejs/vue-next/issues/2431#issuecomment-712286152 You can put them on the same line
<a class="btn btn-secondary" href="/Registro">Back</a> <input type="submit" value="Safe" class="btn btn-primary"/>