html - 无法选择文本

标签 html css

在我的测试网站上做一些工作时,我遇到了一个问题。 我已经输入了我所有的代码,因为我不知道这个问题是从哪里来的。 https://jsfiddle.net/gdz4k3wt/ 从这个jsfiddle可以看出,网站中文本的顶部无法选择,我不知道这个问题来自哪里,所以谁能解释一下这个错误?

HTML代码:

.button {
  text-decoration: none;
  color: #ffffff;
  background: rgba(143, 152, 191, 0.4);
  color: #999;
  line-height: 3em;
  display: block;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  font-family: courier new;
  -moz-transition: 1s linear;
  -ms-transition: 1s linear;
  -o-transition: 1s linear;
  -webkit-transition: 1s linear;
  transition: 1s linear;
}
.button2 {
  text-decoration: none;
  color: #ffffff;
  background: rgba(143, 152, 191, 0.4);
  color: #999;
  line-height: 3em;
  display: block;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  font-family: courier new;
  -moz-transition: 1s linear;
  -ms-transition: 1s linear;
  -o-transition: 1s linear;
  -webkit-transition: 1s linear;
  transition: 1s linear;
}
.button3 {
  text-decoration: none;
  color: #ffffff;
  background: rgba(143, 152, 191, 0.4);
  color: #999;
  line-height: 3em;
  display: block;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  font-family: courier new;
  -moz-transition: 1s linear;
  -ms-transition: 1s linear;
  -o-transition: 1s linear;
  -webkit-transition: 1s linear;
  transition: 1s linear;
}
.button:hover {
  background: rgba(232, 107, 149, 0.4);
  color: white;
}
.button2:hover {
  background: rgba(232, 107, 149, 0.4);
  color: white;
}
.button3:hover {
  background: rgba(232, 107, 149, 0.4);
  color: white;
}
.image {
  width: 300px;
  height: 200px;
}
.image:hover {
  opacity: 0.9;
  -moz-transition: 0.2s linear;
  transition: 0.2s linear;
}
h1 {
  text-align: justify;
}
.mainn {
  width: 111em;
  height: 25em;
}
p {
  text-align: justify;
}
.menuu {
  width: 100%;
  background: rgba(143, 152, 191, 0.4);
  height: 3em;
  position: fixed;
}
body {
  background-color: #333;
  color: #999;
  font: 12px/1.4em Arial, sans-serif;
}
#wrap {
  margin: 10px auto;
  background: rgba(143, 152, 191, 0.4);
  padding: 10px;
  width: 1000px;
}
<body background="pictures/spacexwall.jpg">
  <div class="menuu">
    <div class="mainn">
      <a class="button" href="SpaceX.html"> Home </a>
      <a class="button2" href="founder.html"> Founder </a>
      <a class="button3" href="pictures.html"> Pictures </a>
    </div>
  </div>
  <font face="helvetica">
    <div>  <br></div>
    <div>  <br></div>
    <div>  <br></div>
    <div id="wrap">
    <p> <h1> <div> SpaceX Falcon 9 </h1> </p>
    <hr>
    <p><div> Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit. As the first rocket completely developed in the 21st century, Falcon 9 was designed from the ground up for maximum reliability. Falcon 9’s simple two-stage configuration minimizes the number of separation events -- and with nine first-stage engines, it can safely complete its mission even in the event of an engine shutdown.
    
    Falcon 9 made history in 2012 when it delivered Dragon into the correct orbit for rendezvous with the International Space Station, making SpaceX the first commercial company ever to visit the station. Since then SpaceX has made a total of three flights to the space station, both delivering and returning cargo for NASA. Falcon 9, along with the Dragon spacecraft, was designed from the outset to deliver humans into space and under an agreement with NASA, SpaceX is actively working toward that goal.</div> </p>
    <p> <h1> SpaceX Falcon Heavy </h1> </p>
    <hr>
    <p> When Falcon Heavy lifts off later this year, it will be the most powerful operational rocket in the world by a factor of two. With the ability to lift into orbit over 53 metric tons (117,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost. Falcon Heavy draws upon the proven heritage and
    
    reliability of Falcon 9. Its first stage is composed of three Falcon 9 nine-engine cores whose 27 Merlin engines together generate nearly 4 million pounds of thrust at liftoff, equal to approximately fifteen 747 aircraft operating simultaneously. Only the Saturn V moon rocket, last flown in 1973, delivered more payload to orbit. Falcon Heavy was designed from the outset to carry humans into space and restores the possibility of flying missions with crew to the Moon or Mars </p>
    <p> <h1> SpaceX Dragon </h1> </p>
    <hr>
    <p> Dragon is a free-flying spacecraft designed to deliver both cargo and people to orbiting destinations. Dragon made history in 2012 when it became the first commercial spacecraft in history to deliver cargo to the International Space Station and safely return cargo to Earth, a feat previously achieved only by governments. It is the only spacecraft currently flying that is capable of returning significant amounts of cargo to Earth. Currently Dragon carries cargo to space, but it was designed from the beginning to carry humans. Under an agreement with NASA, SpaceX is now developing the refinements that will enable Dragon to fly crew. Dragon's first manned test flight is expected to take place in 2-3 years. </p>
    </div>
    <p> <h1> SpaceX Falcon 9 </h1> </p>
    <hr>
    <p><div> Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit. As the first rocket completely developed in the 21st century, Falcon 9 was designed from the ground up for maximum reliability. Falcon 9’s simple two-stage configuration minimizes the number of separation events -- and with nine first-stage engines, it can safely complete its mission even in the event of an engine shutdown.
    Falcon 9 made history in 2012 when it delivered Dragon into the correct orbit for rendezvous with the International Space Station, making SpaceX the first commercial company ever to visit the station. Since then SpaceX has made a total of three flights to the space station, both delivering and returning cargo for NASA. Falcon 9, along with the Dragon spacecraft, was designed from the outset to deliver humans into space and under an agreement with NASA, SpaceX is actively working toward that goal.</div> </p>
    <p> <h1> SpaceX Falcon Heavy </h1> </p>
    <hr>
    <p> When Falcon Heavy lifts off later this year, it will be the most powerful operational rocket in the world by a factor of two. With the ability to lift into orbit over 53 metric tons (117,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost. Falcon Heavy draws upon the proven heritage and
    
    reliability of Falcon 9. Its first stage is composed of three Falcon 9 nine-engine cores whose 27 Merlin engines together generate nearly 4 million pounds of thrust at liftoff, equal to approximately fifteen 747 aircraft operating simultaneously. Only the Saturn V moon rocket, last flown in 1973, delivered more payload to orbit. Falcon Heavy was designed from the outset to carry humans into space and restores the possibility of flying missions with crew to the Moon or Mars </p>
    <p> <h1> SpaceX Dragon </h1> </p>
    <hr>
    <p> Dragon is a free-flying spacecraft designed to deliver both cargo and people to orbiting destinations. Dragon made history in 2012 when it became the first commercial spacecraft in history to deliver cargo to the International Space Station and safely return cargo to Earth, a feat previously achieved only by governments. It is the only spacecraft currently flying that is capable of returning significant amounts of cargo to Earth. Currently Dragon carries cargo to space, but it was designed from the beginning to carry humans. Under an agreement with NASA, SpaceX is now developing the refinements that will enable Dragon to fly crew. Dragon's first manned test flight is expected to take place in 2-3 years. </p>
    </div>
    </font>
</body>

最佳答案

你的

<div class = 'mainn'>

元素的高度太大,遮挡了文本的顶部,从而阻碍了您的选择。

.mainn {
     height: 2em;
     width: 111em;
}

将解决问题。

修复了 jsfiddle here .

关于html - 无法选择文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29985974/

相关文章:

html - CSS 高度属性不会转换为 CSS

javascript - 使用 javascript/html5 即时生成声音

javascript - 使用 jquery 在 div 中添加、调整大小、位置、颜色更改文本

jquery - 在悬停时替换 Ruby 链接文本

jQuery 移动用户代理检测

html - 使用 CSS 保持 div 的纵横比

css - Javafx/CSS 白色在黑色背景下无法正确显示

css - <a> 链接元素的底部边距

javascript - 缩小浏览器窗口时阻止背景图像调整大小

php - 标题背景图像不会在 cms 的所有页面中更改