Question

我的网站在桌面上看起来很棒。但是，我的一个表单元素 - ＆＃34; Message＆＃34;在手机/平板电脑设备上打开表单时，文字在我的字体真棒铅笔图标上重叠。

奇怪的是，此错误仅出现在平板电脑/移动设备上。当我确保这些设备上的所有内容都很好时，它并没有显示在我的响应工具中。

我使用Google Chrome响应工具在这些设备上进行测试。我还尝试在桌面上使用Viewport Resizer来测试它们，但是它们都没有在这些大小的屏幕上弹出这个问题。

我添加了一张照片来证明这一点，以下是我的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Contact</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 <link rel="stylesheet" type="text/css" href="contact.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



</head>
<body>

  <!--Homepage link-->   
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Mu&ntilde;oz Designs</a>

    <!--Toggle Button-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span></button>

      <!--Navbar links-->
      <div class="collapse navbar-collapse text-center" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <li class="nav-item">
              <a class="nav-link"
              href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link"
              href="portfolio.html">Portfolio</a>
            </li>

            <!--Social Media Icons-->
                  <li class="nav-item">
              <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

              <li class="nav-item">
                <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

                <li class="nav-item">
                  <a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                  <li class="nav-item">
                    <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>

                    <li class="nav-item">
                      <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>

                      <li class="nav-item">
                        <a class="nav-link" href="contact.php" title="Email">
                          <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                        </ul>
                      </div>
                    </div>
                  </nav>
                  <!--Intro of Contact-->

                  <div class="intro">
                    <h1>Contact</h1>
                    <h4>If you would like to work with me, send me a message!</h4>
                  </div>

                  <!--Contact Form-->

                  <div class="container">

                    <?php if ($msg !=''): ?>

                      <div class="alert <?php echo $msgClass; ?>"><?php echo $msg; ?></div>

                    <?php endif; ?>

                    <div class="row">
                      <div class="col-sm-12 mx-offset-auto">
                        <div class="well well-sm">
                          <form class="form-horizontal" method="post">

                            <fieldset>

                              <div class="form-group">
                                <div class="col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <input id="fname" name="name" placeholder="Name" type="text" class="form-control" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
                                    <label for="fname" class="fa fa-user input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group">
                                <div class=" col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <input id="email" name="email" type="text" placeholder="Email" class="form-control" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
                                    <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group">
                                <div class=" col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>
                                    <label for="message" class="fa fa-pencil input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group text-center">
                                <div class="col-md-8 mx-auto">
                                  <button type="submit" name="submit" class="btn btn-outline-secondary btn-md">Submit</button>
                                </div>
                              </div>
                            </fieldset>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>

<div class="copyright">&#169; Mu&ntilde;oz Designs</div>

                  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
                </body>
                </html>


 html{
    box-sizing: border-box;}
    *,
    *: before, 
    *: after {
      box-sizing: inherit;
      padding: 0;
      margin: 0;
    }
    body{
     background-image: url();
     width: 100%;
     height: 100%;
     background-position: bottom center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
     background-color: #464646;
     font-family:"Quicksand";
     font-size: 1.2em;
     line-height: 1.375em;
     padding: 0;
     margin: 0;

     background-color: #2F3A3B;
     -webkit-font-smoothing: antialiased;

   }
   navbar-brand{

    height: 3em;
    width: 3em;
    margin-top: -8px;

    margin-right: 1em;
    margin-left: 1em;
    margin-bottom: -8px
  }


  .avatar{
    border-radius: 5em;
    margin-right: .5em;
    margin-left: 1em;

  }
  .intro{
    display: inline-block;
    width: 100%;
    padding: 65px 0 65px;

    background-color: #2A2332;
    background-size: cover;
    font-size: 1.9em;
    text-align: center;
    color: #FFF;

  }

  h1{
    font-weight: medium;
    text-shadow:5px 5px 10px black;
    position: center;
  }



  .container{
    margin-top: 1em;

    margin-right: 1em;

  }


  .bigicon {
    font-size: 35px;
    color: #808080;

  }

  .input-icon {
    position: absolute;
    left: .5rem;
    top: .7rem;

    /* Keep icon in center of input, regardless of the input height */
  }

  .btn{
    margin-right:30%;
  }

  .input-icon {

   position: absolute;
   left: .5rem;
   top: .9rem;
 }

 #message {
  vertical-align: middle;
}

input {
  padding-right: 30px;
}

.form-control {
  text-indent: 2rem;
  width: 75%;
}

.input-wrapper {
  position: relative;


}


.copyright{
  bottom: 0%;
  position: fixed;
  color: #FFF;
  margin-left: .5%;
  font-size: 65%;
}


@media all and (max-width: 1280px){
  .form-control{
    width: 95%;

  }
  .btn{
    margin-right: 5rem;

  }

@media all and (max-width: 1028px){

 .form-control{
  width: 100%; 
}

.btn{
  margin: auto;
}
}
/*Tablet*/

@media all and (max-width: 768px){


  .form-control{
    width: 100%;

  }
  .btn{
    margin:auto;
  }


}

/*mobile*/
@media screen and (max-width: 360px) {
  .form-control{
    width: 100%;

  }
  .btn {
    margin: auto;
  }

Answer 1

发现了这个问题。尝试将text-indent更改为padding-left。似乎text-indent是移动Safari浏览器的错误

在此处更改

.form-control {
  padding-left: 2rem; // change here
  width: 75%;
}

 html{
    box-sizing: border-box;}
    *,
    *: before, 
    *: after {
      box-sizing: inherit;
      padding: 0;
      margin: 0;
    }
    body{
     background-image: url();
     width: 100%;
     height: 100%;
     background-position: bottom center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
     background-color: #464646;
     font-family:"Quicksand";
     font-size: 1.2em;
     line-height: 1.375em;
     padding: 0;
     margin: 0;

     background-color: #2F3A3B;
     -webkit-font-smoothing: antialiased;

   }
   navbar-brand{

    height: 3em;
    width: 3em;
    margin-top: -8px;

    margin-right: 1em;
    margin-left: 1em;
    margin-bottom: -8px
  }


  .avatar{
    border-radius: 5em;
    margin-right: .5em;
    margin-left: 1em;

  }
  .intro{
    display: inline-block;
    width: 100%;
    padding: 65px 0 65px;

    background-color: #2A2332;
    background-size: cover;
    font-size: 1.9em;
    text-align: center;
    color: #FFF;

  }

  h1{
    font-weight: medium;
    text-shadow:5px 5px 10px black;
    position: center;
  }



  .container{
    margin-top: 1em;

    margin-right: 1em;

  }


  .bigicon {
    font-size: 35px;
    color: #808080;

  }

  .input-icon {
    position: absolute;
    left: .5rem;
    top: .7rem;

    /* Keep icon in center of input, regardless of the input height */
  }

  .btn{
    margin-right:30%;
  }

  .input-icon {

   position: absolute;
   left: .5rem;
   top: .9rem;
 }

 #message {
  vertical-align: middle;
}

input {
  padding-right: 30px;
}

.form-control {
  padding-left: 2rem; // change here
  width: 75%;
}

.input-wrapper {
  position: relative;


}


.copyright{
  bottom: 0%;
  position: fixed;
  color: #FFF;
  margin-left: .5%;
  font-size: 65%;
}


@media all and (max-width: 1280px){
  .form-control{
    width: 95%;

  }
  .btn{
    margin-right: 5rem;

  }

@media all and (max-width: 1028px){

 .form-control{
  width: 100%; 
}

.btn{
  margin: auto;
}
}
/*Tablet*/

@media all and (max-width: 768px){


  .form-control{
    width: 100%;

  }
  .btn{
    margin:auto;
  }


}

/*mobile*/
@media screen and (max-width: 360px) {
  .form-control{
    width: 100%;

  }
  .btn {
    margin: auto;
  }

<!DOCTYPE html>
<html>
<head>
  <title>Contact</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 <link rel="stylesheet" type="text/css" href="contact.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



</head>
<body>

  <!--Homepage link-->   
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Mu&ntilde;oz Designs</a>

    <!--Toggle Button-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span></button>

      <!--Navbar links-->
      <div class="collapse navbar-collapse text-center" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <li class="nav-item">
              <a class="nav-link"
              href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link"
              href="portfolio.html">Portfolio</a>
            </li>

            <!--Social Media Icons-->
                  <li class="nav-item">
              <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

              <li class="nav-item">
                <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

                <li class="nav-item">
                  <a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                  <li class="nav-item">
                    <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>

                    <li class="nav-item">
                      <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>

                      <li class="nav-item">
                        <a class="nav-link" href="contact.php" title="Email">
                          <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                        </ul>
                      </div>
                    </div>
                  </nav>
                  <!--Intro of Contact-->

                  <div class="intro">
                    <h1>Contact</h1>
                    <h4>If you would like to work with me, send me a message!</h4>
                  </div>

                  <!--Contact Form-->

                  <div class="container">

                    <?php if ($msg !=''): ?>

                      <div class="alert <?php echo $msgClass; ?>"><?php echo $msg; ?></div>

                    <?php endif; ?>

                    <div class="row">
                      <div class="col-sm-12 mx-offset-auto">
                        <div class="well well-sm">
                          <form class="form-horizontal" method="post">

                            <fieldset>

                              <div class="form-group">
                                <div class="col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <input id="fname" name="name" placeholder="Name" type="text" class="form-control" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
                                    <label for="fname" class="fa fa-user input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group">
                                <div class=" col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <input id="email" name="email" type="text" placeholder="Email" class="form-control" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
                                    <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group">
                                <div class=" col-md-8 mx-auto">
                                  <div class="input-wrapper">
                                    <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>
                                    <label for="message" class="fa fa-pencil input-icon bigicon"></label>
                                  </div>
                                </div>
                              </div>

                              <div class="form-group text-center">
                                <div class="col-md-8 mx-auto">
                                  <button type="submit" name="submit" class="btn btn-outline-secondary btn-md">Submit</button>
                                </div>
                              </div>
                            </fieldset>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>

<div class="copyright">&#169; Mu&ntilde;oz Designs</div>

                  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
                </body>
                </html>

Answer 2

我检查了你的CSS并没有看到你重置它。要重置宽度，请使用以下代码。

.form-control {
  text-indent: ...rem;
  width: ...%;
}

用于@media (max-width: 768px)的移动设备屏幕。我认为您应该重置它以使其正确呈现。

文本重叠字体真棒图标 - 仅在移动设备/平板电脑设备中发生

2 个答案: