html - Edge 中的 HTML 提交按钮破坏了初始边框,但正确的插入边框
问题描述
Edge 创建了完美的内嵌边框,但初始边框是错误的。
图片在这里:https ://imgur.com/a/pKavy1K
这两张图片之间唯一的代码变化是将边框样式从开头更改为插入。为什么颜色不完全相同而是互换了?
.SmallButton {
color: grey;
font-family: "Segoe UI";
font-weight: bold;
background-color: white;
font-size: 15px;
border-radius: 30px;
border-style: inset;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
margin-top: 20px !important;
width: 230px !important;
height: 36px !important;
}
<input class="SmallButton" type="submit" value="Sign Up">
解决方案
浏览器有时对如何显示某些 UI 元素的方法略有不同。最好通过应用特定的 CSS 属性来手动设置它们的样式。
您可以将其更改border-style
为实心并应用于border-color
每一侧以获得首选结果。
.button {
background-color: #FFFFFF;
border-radius: 18px;
border-style: solid;
border-width: 2px;
color: #808080;
cursor: pointer;
font-size: 15px;
font-weight: bold;
height: 36px;
max-width: 230px;
width: 100%;
}
.button-outset {
border-color: #F0F0F0 #A0A0A0 #A0A0A0 #F0F0F0;
}
.button-inset {
border-color: #A0A0A0 #F0F0F0 #F0F0F0 #A0A0A0;
}
<input type="submit" class="button button-outset" value="Outset button">
<br><br>
<input type="submit" class="button button-inset" value="Inset button">
推荐阅读
- swift - 在 Xcode 模拟器上运行预览
- terraform - 如何从 terraform 列表中选择元素
- c - 需要在多个数组中显示前 3 个最高数字
- android - 成功登录后如何使“登录布局”更改布局
- javascript - 路由的组件必须是 React native expo 中的 react 组件错误
- dataweave - 将带有父 ID 和子数组的 JSON 转换为 Dataweave 中子数组中每个元素一个 json 对象的数组
- java - 使用鼠标和键盘在 3D 空间中移动 [JavaFX3D]
- java - 如何根据前 10 位数字查找重复值?
- ios - 如何在应用启动时监控订阅状态(swift)
- android - 在断线后从 TextView 中删除无用的空间