Question

在我一直在处理的页面上，当鼠标不在其中时，可以单击后退按钮。我知道这是定位或边缘的东西，但我找不到问题的根源。我提出了JSbin问题。将光标放在后退按钮的右侧，您将看到光标发生变化。我在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>

我该如何解决这个问题？

Answer 1

试试这个css规则：

.but { display:inline-block }

为什么我能够点击远离它的链接？

1 个答案: