Question

I verified that this behavior occurs ONLY on MacBook Pro. Actually, the "bleeding" of the outside of its parent occurs everywhere, but, except for MacBook Pro, it's not an issue that much... Just a couple of pixels.

I have a mystery I can't solve at the moment. Using: Bootstrap 3 + some custom styling.

I have a phone number that should be clickable and a message underneath that shouldn't be. However, either the <span> or the <a> tag is going outside of its container and somehow overlapping the regular text "* Order Now". I selected the tag in Chrome Developer Tools and that's what the picture below is showing:

以下是此代码的JSFiddle： https://jsfiddle.net/h1syL6hz/

以下是完整的代码：

＆＃13;

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
      body {
  font-size: 16px;
  font-family: 'Oxygen', sans-serif;
  background-color: blue;
}

#header-nav {
  background-color: green;
  border-radius: 0;
  border: 0;
}

#nav-list a {
  color: blue;
  text-align: center;
}
#nav-list a span {
  font-size: 1.8em;
}

#phone {
  margin-top: 5px;
}
#phone a {
  text-align: right;
  padding-bottom: 0;
}
#phone div { /* Order */
  color: blue;
  text-align: right;
  padding-right: 15px;
}

    </style>
  </head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <ul id="nav-list" class="nav navbar-nav navbar-right">
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-info-sign"></span><br>Nav 1
            </a>
          </li>
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-info-sign"></span><br>Nav 2
            </a>
          </li>
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-info-sign"></span><br>Nav 3
            </a>
          </li>
          <li id="phone">
            <a href="tel:555-555-5555">
              <span>555-555-5555</span></a><div>* Order Now</div>
          </li>
        </ul>
      </div>
    </nav>
  </header>
 
 
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi atque, nostrum, nihil labore pariatur ea incidunt voluptate porro fugit, a voluptates quibusdam provident nam rerum nesciunt necessitatibus quos velit distinctio.</p>
  
  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

非常感谢任何帮助。无法弄清楚为什么会这样。

Answer 1

我已将您的代码复制粘贴到jsbin，我无法按照您的说法查看..这里是output，也是此处的屏幕截图..

我没有更改任何代码

如果您想要更改，则可以将padding-top: 10px;添加到css类#phone div

我也在你的小提琴中看到了这里的截图：

如果您遇到任何问题，请提供您正在查看的浏览器详细信息..

为什么<a> tag overlapping the non-clickable region?

1 个答案: