CSS переполнение переполнения в мобильном браузере сбой

Ничего себе, одно за другим! Хорошо. Поэтому я слежу за примером для создания рабочего чата - и он работает правильно (с точки зрения взаимодействия между браузером и сервером, минус некоторые очевидные вещи безопасности, которые, вероятно, я должен реализовать).CSS переполнение переполнения в мобильном браузере сбой

ОДНАКО, я пытаюсь изменить стиль моего чата, чтобы я мог прокручивать его в любом браузере, в том числе мобильных. На самом деле проблема не в состоянии прокручиваться сама по себе - переполнение: свойство auto в CSS работает в каждом браузере, за исключением одной маленькой детали.

Если вы проверите это с помощью мобильного браузера, вы обнаружите, что можете прокручивать весь путь до конца ... но только когда вы дойдете до конца, текстовое поле, похоже, немного портит пути вместо того, чтобы оставаться в конце. НЕ ВСЕ ПУТЬ В ТОП, но как 3 пикселя или около того. Я действительно не знаю, что делать. Я исследовал вещь, называемую эффектом «резиновой ленты» в мобильных браузерах, но я не совсем уверен, что это связано с моей проблемой. Это? Или это возможно больше связано с divs, которые я размещаю внутри чата с задней стороны?

chatroom.php

<?php session_start(); 
#session_regenerate_id(true); 
include ("dbconfig.php"); 
if(!isset($_SESSION['introd'])) 
{ 
    header("Location: intro.php"); 
} 
if(!isset($_SESSION['user'])) 
{ 
    header("Location: index.php"); 
} 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>My Webpage</title> 
<!-- <meta name = "viewport" content = "width=device-width, initial-scale=1.0"/>--> 
    <link rel = "stylesheet" type = "text/css" href = "site.css" /> 
    <link rel="shortcut icon" href="index.html?img=favicon" type="image/ico" /> 
    <script> 




     </script> 
</head> 

<body> 
    <?php include("header.php"); ?> 

       <div id="wrapper"> 
        <div id="menu"> 
         <p class="welcome">Welcome, <b><?php echo $_SESSION['user']; ?></b></p> 
         <div style="clear:both"></div> 
        </div> 

        <div id="chatbox"><?php 
        if(file_exists("log.html") && filesize("log.html") > 0){ 
         $handle = fopen("log.html", "r"); 
         $contents = fread($handle, filesize("log.html")); 
         fclose($handle); 

         echo $contents; 
        } 
        ?></div> 

        <form name="message" action=""> 
         <input name="usermsg" type="text" id="usermsg" size="63" /> 
         <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> 
        </form> 
       </div> 
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
       <script type="text/javascript"> 
       // jQuery Document 
       $(document).ready(function(){ 
        setInterval (loadLog, 2000); //Reload file every 2500 ms or x ms if you wish to change the second parameter 

        //If user submits the form 
        $("#submitmsg").click(function(event){ 

         var clientmsg = $("#usermsg").val(); 
         $.post("post.php", {text:clientmsg}); 
         //alert("About to post"); 
         //event.preventDefault(); 
         /*$.ajax({ 
          type: "POST", 
          url: "post.php", 
          data: {text:clientmsg}, 
          //dataType: text, 
          error: function(){ 
           alert("Error receiving text"); 
          }, 
          success: function(response){ 
           alert("Submission received: " + response); 
          }, 
         });*/ 
         $("#usermsg").attr("value", ""); 
         return false; 
        }); 

        //Load the file containing the chat log 
        function loadLog(){  
         var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request 
         $.ajax({ 
          url: "log.html", 
          cache: false, 
          success: function(html){   
           $("#chatbox").html(html); //Insert chat log into the #chatbox div 

           //Auto-scroll   
           var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request 
           if(newscrollHeight > oldscrollHeight){ 
            $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div 
           }    
          }, 
         }); 
        } 
       }); 
       </script> 

       <center><a href='logout.php'>Logout</a></center>  

      <p class = "content"> This is a page that is a scrap work in progress. </p> 


      <?php include("footer.php"); ?> 
    </body> 
</html>

site.css

a { 
    text-decoration: none; 
    color: green; 
    } 

    p { 
     font-family:"sans-serif"; 
     font-size:1.875em; 
     color: white; 
     text-align: center; 
     font-style: bold; 
    } 

    p.welcome { 
     font-family:"verdana"; 
     font-size:1.875em; 
     color: white: 
     text-align: center; 
     font-style:bold; 
    } 

    p.content { 
     font-family:"verdana"; 
     font-size:1em; 
     color: white; 
     font-style: italic; 
    } 

    p.nostyling { 
     color:black; 
    } 

    div.contentContainer { 
     border: 1; 
     cellspacing: 5; 
     cellpadding: 15; 
     width: 50%; 
     bgcolor: 251111; 
    } 

    img{ 
     display:block; 
     margin:auto; 
    } 

    div.main { 
     width:50%; 
     margin:auto; 
     background:#251111; 
    } 

    div.bridge { 
     width:100% 
    } 

    div.deck { 
     width:100% 
    } 

    div.control { 
     float:left; 
     margin:0; 
     padding:1em; 
     color:white; 
    } 

    div.arsenal { 
     margin-left:25%; 
     background-color:#0A1616; 
     padding: 1em; 
     border: 15px solid #251111; 
    } 

    body { 
     background-color: #393635; 
     color: blue; 
    } 

    #wrapper, #loginform { 
    margin:0 auto 0 -7; 
    padding-bottom:25px; 
    width:450px; 
    border:2px solid #ACD8F0; } 

#loginform { padding-top:18px; } 

    #loginform p { margin: 5px; } 

#chatbox { 
    text-align:left; 
    margin:0 auto; 
    margin-bottom:25px; 
    padding:10px; 
    background:#fff; 
    height:270px; 
    width:430px; 
    border:1px solid #ACD8F0; 
    overflow:auto; 
    -webkit-overflow-scrolling: touch;} 

#usermsg { 
    width:395px; 
    border:1px solid #ACD8F0; } 

#submit { width: 60px; } 

.error { color: #ff0000; } 

#menu { padding:12.5px 25px 12.5px 25px; } 


.msgln { margin:0 0 2px 0; }

post.php

<?php 
session_start(); 
if(isset($_SESSION['user'])){ 
    $text = $_POST['text']; 

    $fp = fopen("log.html", 'a') or die("Unable to open/write file!"); 
    #chmod("log.html", 0777); 
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['user']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>"); 
    fclose($fp); 
    echo "Just wrote the file"; 
} 
?>

источник

2015-10-25 Kieran Ojakangas

Попробуйте добавить

position: relative;

в чат

источник

2015-10-25 23:35:19 kfreeman04208

Это хорошая попытка, но это, похоже, не работает ... также полностью делает мой макет хуже на этой странице для моих мобильных браузеров, и я уверен, что мог бы это положил лучше начать, но это, кроме того, ... –

Попробуйте родственника, посмотрите, работает ли он лучше. – kfreeman04208

Это сработало! Получил объяснение этому? –

CSS переполнение переполнения в мобильном браузере сбой

ответ

Смежные вопросы