Javascript 为什么我可以点击远离它的链接？_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 为什么我可以点击远离它的链接？

javascript jquery html css twitter-bootstrap

Javascript 为什么我可以点击远离它的链接？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,在我一直在处理的页面上，当鼠标不在其中时，可以单击后退按钮。我知道这是一个定位或边缘的问题，但我找不到问题的根源。我对这个问题作了初步的讨论。将光标放在后退按钮的右侧，您将看到光标发生变化。我在JSbin上发布的不是我的实际代码，因为我使用的是PHP。我将在此处发布实际代码： <?php /*session_start(); if(!isset($_SESSION["joke"])){ header("Location: insidejoke.php"); }*/ ?> <!

在我一直在处理的页面上，当鼠标不在其中时，可以单击后退按钮。我知道这是一个定位或边缘的问题，但我找不到问题的根源。我对这个问题作了初步的讨论。将光标放在后退按钮的右侧，您将看到光标发生变化。我在JSbin上发布的不是我的实际代码，因为我使用的是PHP。我将在此处发布实际代码：

<?php
/*session_start();
if(!isset($_SESSION["joke"])){
header("Location: insidejoke.php");
}*/
?>

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<title>Lorem Ipsum Translator</title>
</head>
<body>
<style>
body{
    background-color: #FBF6D9;
    margin:0;
    padding: 0;
    }
#inputField{
margin-top: 150px;
padding: 5px;
 box-sizing: border-box;
 width: 90%;
 height: 300px;
 border: red 1px solid;
 resize: none;   
 font-size: 20px;
 color: #33cc33;
 text-shadow: 1px 1px gray;
}

#inputField:focus{
border:0;
outline-color: red;
background-color: #F0FFFF;
box-shadow: 0 0 20px gray;
}.but{
 background-color: #ccccff;
 border-radius: 10px;
 box-shadow: 5px 5px 5px gray;
 font-size: 20px;
 color: #4d4d4d;
 width: 100px;
 height: 50px;
 cursor: pointer;
 margin: 10px;
 margin-left: 0px;
 position: relative;
}
::-webkit-input-placeholder {
    font-weight: bold;
    color: #33cc33;
    font-size: 15px;
    text-shadow: none;
}
::-moz-placeholder {
  font-weight: bold;
    color: #33cc33;
    font-size: 15px;
    text-shadow: none;
}
#containertranslation{
margin-top: 150px;
 width: 90%;
 height: 300px;
 background-color:white;
 border: 1px red solid;
}
#translation{
    color: #33cc33;
    font-size: 30px;
    padding: 5px;
    }
#back:hover{
 color: black;  
}
#goback{
    position: absolute;
left: 25px;
top: 10px;
}
#submit:hover{
 color: black;   
}
a{
 text-decoration: none!important;   
}
#back{
 margin-top: 15px;   
}
.container{
 width: 95%!important;   
}
@media (max-width: 576px){
    #inputField, #containertranslation{
        margin-top: 10px;
        height: 250px;
    }
}
</style>
<?php
if(isset($_SESSION["fromsite"])){
echo "<a href='projects.html'><div id='back'><p id='goback'>Back!</p></div></a>";
}
?>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
<form id="translateform" action="process.php" method="post"><?php 
echo "<textarea maxlength='3000' id='inputField' placeholder='Enter your Lorem Ipsum text here:' name='translate'>";
if(isset($_SESSION['text'])){
    echo $_SESSION['text'];
    }
    echo "</textarea>";
    echo '<input type="submit" name="submit" class="but"id="submit" value="Submit!">'

        ?>
</form>
</div>
<div class="col-sm-6">
<?php
echo "<div id='containertranslation'><p id='translation'>";
if(isset($_SESSION['translation'])){echo $_SESSION['translation'];}//if translated
else{echo "Translation: ";}//if not, empty field
echo "</p></div>";//adds div with translation
echo "<a href='projects.html'><div id='back'class='but'><p id='goback'>Back!</p></div></a>";


?>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 
</body>
</html>


同侧翻译器
身体{
背景色：#FBF6D9；
保证金：0；
填充：0；
}
#输入字段{
边缘顶部：150px；
填充物：5px；
框大小：边框框；
宽度：90%；
高度：300px；
边框：红色1px实心；
调整大小：无；
字体大小：20px；
颜色：#33cc33；
文本阴影：1px 1px灰色；
}
#输入字段：焦点{
边界：0；
轮廓颜色：红色；
背景色：#F0FFFF；
框阴影：0 20px灰色；
}.但是{
背景色：#ccccff；
边界半径：10px；
长方体阴影：5px 5px 5px灰色；
字体大小：20px；
颜色：#4d；
宽度：100px；
高度：50px；
光标：指针；
利润率：10px；
左边距：0px；
位置：相对位置；
}
：-webkit输入占位符{
字体大小：粗体；
颜色：#33cc33；
字体大小：15px；
文本阴影：无；
}
：-moz占位符{
字体大小：粗体；
颜色：#33cc33；
字体大小：15px；
文本阴影：无；
}
#容器翻译{
边缘顶部：150px；
宽度：90%；
高度：300px；
背景色：白色；
边框：1px红色实心；
}
#翻译{
颜色：#33cc33；
字体大小：30px；
填充物：5px；
}
#后退：悬停{
颜色：黑色；
}
#戈巴克{
位置：绝对位置；
左：25px；
顶部：10px；
}
#提交：悬停{
颜色：黑色；
}
a{
文字装饰：无！重要；
}
#背{
边缘顶部：15px；
}
.集装箱{
宽度：95%！重要；
}
@介质（最大宽度：576px）{
#输入字段，#容器翻译{
边缘顶部：10px；
高度：250px；
}
}
尝试以下css规则：
.but { display:inline-block }

请在此处包含代码。通过验证程序运行html。您有语法错误。div#back
是一个语法错误。其宽度扩展到其容器的宽度。