ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

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

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

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

ติดปัญหาเกี่ยวกับการเเสดง 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/[email protected]/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/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/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 บาท หรือ ระบุจำนวน