Question

即使是最简单的自定义按钮，例如 <button class="button-new">Test button</button> 显示为chrome默认按钮。我的按钮 - 新css看起来像这样：

.button-new{
  padding: 45px;
  border-color: black;
  background-color:#444;
  color: white;
}

我使用的是codepen.io，然后使用ftp上传到网络服务器。在codepen上，它看起来很好。当我访问网页时，它会忽略我的样式，但只会在按钮上。

如果您想查看自己，该网站是fsleague.website。这是网站上显示的网站html：

<html lang="en"><head>
<meta charset="UTF-8">
<title>A Pen by  John Manos</title>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">
<style></style></head>

<body>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
        <div class="container-fluid">
            <div class="well outter-well">
                <div class="row">
                    <h1 class="text-center ubuntu-font"><strong>Fantasy Stock League</strong></h1>
                </div>
            <button class="button-new">Please work</button>
            </div>
        </div>

Answer 1

清除chrome的缓存解决了这个问题。我认为该页面正在从缓存中加载旧的css文件，而不是加载任何已编辑的css文件。

Answer 2

尝试设置

-webkit-appearance: none;

此外，当您公开部署（生产代码）时，请考虑使用像normalize.css这样的库。它会为您重置所有默认浏览器应用的样式和其他不一致。在你所有的css之前加载它：

Normalize CSS

Chrome忽略<button> css

2 个答案: