0

在 fork 一个 CodePen 之后，我重新设计了它的一部分，它在CodePen处完美呈现，但是通过 CodeKit 运行后，它看起来很奇怪，看到两个字段中间的边框了吗？

编译的CSS： 

    * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background: #E2E2E2;
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif; }

.login-form-wrap {
  background: #8fc400;
  border: 1px solid #8fc400;
  box-shadow: 0 1px #8fc400 inset, 0 0 10px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: relative;
  width: 360px;
  height: 380px;
  margin: 60px auto;
  padding: 50px 30px 0 30px;
  text-align: center; }
  .login-form-wrap:before {
    background: url(http://cs6265.userapi.com/u155567463/docs/ad0e8d87e888/OSX-Buttons.png);
    display: block;
    content: '';
    width: 58px;
    height: 19px;
    top: 10px;
    left: 10px;
    position: absolute; }
  .login-form-wrap > h1 {
    margin: 0 0 50px 0;
    padding: 0;
    font-size: 26px;
    color: #fff; }
  .login-form-wrap > h5 {
    margin-top: 40px; }
  .login-form-wrap > h5 > a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    font-weight: 400; }

.login-form input[type="email"], .login-form input[type="password"] {
  width: 100%;
  border: 1px solid;
  outline: none;
  padding: 12px 20px;
  color: #424647;
  font-weight: 400;
  font-family: "Lato", sans-serif; }
.login-form input[type="email"] {

  border-radius: 4px 4px 0 0;
  padding-bottom: 13px;
  box-shadow: 0 -1px 0 #e0e0e0 inset, 0 1px 2px rgba(0, 0, 0, 0.23) inset; }
.login-form input[type="password"] {
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.23) inset, 0 1px 2px rgba(255, 255, 255, 0.1); }
.login-form input[type="submit"] {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  background: #e0e0e0;
  background: -moz-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e0e0e0), color-stop(100%, #cecece));
  background: -webkit-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  background: -o-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  background: -ms-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
  background: linear-gradient(to bottom, #e0e0e0 0%, #cecece 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#cecece',GradientType=0 );
  display: block;
  margin: 20px auto 0 auto;
  width: 100%;
  border: none;
  border-radius: 3px;
  padding: 8px;
  font-size: 17px;
  color: #636363;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  font-weight: 700;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.17), 0 1px 0 rgba(255, 255, 255, 0.36) inset; }

截屏：

截屏

4

1 回答 1

4

添加normalize.css到您的项目中。

于 2013-04-04T21:49:22.100 回答