ติดปัญหาเกี่ยวกับการเเสดง layout ใน บราวเซอร์ ของ safari ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ติดปัญหาเกี่ยวกับการเเสดง layout ใน บราวเซอร์ ของ safari ครับ

ติดปัญหาเกี่ยวกับการเเสดง layout ใน บราวเซอร์ ของ safari ครับ

รบกวนสอบถามหน่อยครับ ว่าจะต้องเเก้ปัญหาอย่างไรเมื่อ layout หน้าเว็บสามารถเปิดผ่านเครื่อง pc ได้ปกติ เเต่เมื่อไปเปิดในตัวของ safari ของเครื่อง mac ตัว layout กลับไม่ถูกต้อง รบกวนหน่อยครับ

Antinew007 21-02-2020 17:45:20

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ตัวอย่างนะครับ จากรูป โดยที่รูปแรกเป็นรูปที่ถูกต้องครับ สังเกตุได้จากเส้นสีเเดง มีขนาดเท่ากับ 3px เเสดงใน pc เเต่พอไปเปิดใน mac กลับเเสดงรูปเเบบตามรูปที่ 2 โดยที่ขนาดของเส้นสีเเดงเท่ากับ 1px ครับ

.title-section .line {
    display: inline-block;
    padding-bottom: 10px !important;
    padding-right: 5px;
    border-bottom: 3px solid #D9000D;
}

ภาพที่ 2

Antinew007 21-02-2020 20:47

ความคิดเห็นที่ 2

ถ้า inspect css style ขนาดน่าจะยังเท่ากับ 3px เหมือนเดิม แต่น่าจะเกิดจาก style ของ element อื่นมาทำให้
ให้ element ที่จัดการขยับหรือตำแหน่งเคลื่อน ส่วนใหญ่ที่เจอ จะเป็น paddiing margin และก็ขนาด ความกว้างหรือสูง
และอีก element ที่ชอบเจอปัญหาคือ tags <a>
แนทางแก้ไข คงต้อง inspect style ของตัวใกล้เคียง แล้วแก้ไขให้ถูกต้อง
หรือดูแนวทางนี้ ไปปรับใช้งาน

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>
<style>
  ul.my-css-1 {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    height: 50px;
    width: 50%;
    justify-content: center;
    background: yellow;
    align-items: center;
}
ul.my-css-1 li {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-grow: 1;
    background-color: #CCC;
    height: 50px;
    border-bottom: 1px solid #607D8B;
    justify-content: center;
    align-items: center;
}
ul.my-css-1 li.active {
    border-bottom: 3px solid red;
}
ul.my-css-1 li a {
    flex-grow: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.my-css-1 li.active a {
    font-weight: bold;
}
</style>
 
  <ul class="my-css-1">
    <li class="active"><a href="#">Top Stories</a></li>
    <li><a href="#">Follow Updated</a></li>
</ul>
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
     $("ul.my-css-1 li").click(function(){
       $(this).addClass("active").siblings("li").removeClass("active");
     });
});
</script>
</body>
</html>

ตัวอย่าง DEMO

ninenik 21-02-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน