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

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

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


Antinew007 21-02-2020 17:45:20

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

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

1
2
3
4
5
6
.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 ของตัวใกล้เคียง แล้วแก้ไขให้ถูกต้อง
หรือดูแนวทางนี้ ไปปรับใช้งาน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ