Nút Thích trên Facebook Gây Thanh cuộn Ngang

Gần đây tôi đã thêm một nút like facebook vào trang web của mình và nó gây ra một thanh cuộn ngang xuất hiện khi không cần thiết. Nó không xuất hiện trong Chrome nhưng có trong Firefox và IE.Nút Thích trên Facebook Gây Thanh cuộn Ngang

Tôi đã kiểm tra mã được tạo trong Firebug và không thể xem có gì không ổn.

Dưới đây là một liên kết đến trang web, do đó bạn có thể thấy: http://www.swiftfurniture.com/

Như bạn thấy, trên Firefox và IE (có thể các trình duyệt khác quá), có một thanh cuộn ngang khi nó không phải là cần thiết. Đó chắc chắn là nút Facebook giống như nó gây ra, bởi vì khi tôi nhận xét điều đó, họ biến mất.

Tôi đã thêm một chiều rộng cố định div quanh nút có tràn: ẩn được áp dụng, nhưng dường như bỏ qua điều đó.

Tôi biết có rất nhiều câu hỏi khác tương tự như vậy, nhưng với việc sử dụng PrestaShop, tôi thực sự không muốn gây rối với mã cốt lõi quá nhiều chỉ để có nút Facebook Like (nếu có thể). Tôi đã hy vọng cho một giải pháp để giữ tất cả các mã chứa trong "module xã hội" tôi đã tạo ra ... tức là - chỉ một tập tin thay vì lộn xộn với các tập tin tiêu đề vv của PrestaShop.

Nguồn

2012-03-21 BT643

Tôi đã nhìn vào vấn đề của bạn một chút với Firebug và có thể chia sẻ một số quan sát mà có thể Hữu ích.

Có mã đang được đưa vào số <div id="fb-root"></div> của bạn và bên trong đó là khung nội tuyến có chiều rộng kiểu nội tuyến là 575px.

Đó là nguyên nhân gây ra thanh cuộn.

Nguồn

2012-03-21 17:19:36 redlena

Không biết làm thế nào tôi bỏ lỡ điều đó, tôi biết phải có một cái gì đó làm cho nó rộng hơn nhưng không thể phát hiện ra nó. Doh! Tôi đã thêm: '.FB_UI_Hidden { \t chiều rộng: 100px! } 'như là một phong cách css và nó cố định vấn đề. Cảm ơn – BT643

Tôi có cùng sự cố ... có chiều rộng trong mã (tôi nghĩ mặc định là 450). Nếu bạn thay đổi nó thành một thứ như 150, tôi nghĩ bạn sẽ có hình dạng tốt. Tất nhiên, nó phụ thuộc vào sở thích bạn chọn trên plugin facebook.

Chúc may mắn, hy vọng điều đó sẽ hữu ích.

Nguồn

2012-03-21 17:14:24 NotJay

Có một DIV ngay sau

<div id="fb-root" class=" fb_reset"> 

<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">

Remove vị trí tuyệt đối từ này và cuộn ngang sẽ biến mất sau đó nó sẽ hiển thị một số nội dung nói

Given URL is not permitted by the application configuration.

do đó, hoặc chỉ cần loại bỏ DIV này hoặc áp dụng

display:none; để làm việc này hoàn hảo

Xem ảnh chụp màn hình này

enter image description here

có vấn đề thấy có một cuộn ngang
có giải pháp xem không có cuộn ngang nhưng không mong muốn nội dung trong vòng tròn.
áp dụng display none; để div này hoặc bằng cách loại bỏ này div hoàn toàn từ mã, sẽ dẫn bạn đến các giải pháp

Nguồn

2012-03-21 17:17:47 Jack

Tôi không thể thay đổi bất kỳ mã nào mặc dù theo như tôi biết? Nó được tiêm bởi Facebook. – BT643

Việc đánh dấu Facebook chèn vào trang của bạn có thể thay đổi để bạn muốn sử dụng giải pháp không phụ thuộc vào nó.

Bạn có thể giải quyết vấn đề này bằng cách đặt div fb-gốc là đứa con đầu lòng của nguyên tố cơ thể bạn

<body> 
    <div id="fb-root"></div>

Thẻ kịch bản và fb-like div có thể vẫn còn ở vị trí ban đầu của họ.

Ref: Facebook documentation và bug report

Nguồn

2012-04-17 07:21:38 scarba05

Tôi có '# fb-root' làm div con đầu tiên và tôi vẫn thấy sự cố. – emptywalls

Bạn có thể thêm vào "fb-like" thuộc tính dữ liệu width = "100px"

Nguồn

2014-02-12 10:29:48 user2722034

Đây là giải pháp đúng. Tiện ích tương tự của tôi không còn chuyển sang chiều rộng lớn khi đang tải. –

Trong số các giải pháp khác nhau được liệt kê trên trang này, đây là giải pháp duy nhất thực sự làm việc cho tôi. Triệu chứng là thanh cuộn ngang nhấp nháy trong khi tải nút FB (và sau đó biến mất). – medmunds

Không ai trong số các câu trả lời ở đây làm việc cho tôi vì vậy tôi đã thử nó bản thân mình. Tôi tìm thấy một giải pháp:

Đặt sau CSS trong đầu trang web của bạn:

#fb-like-wrapper iframe { 
    width:100px!important 
}

Đặt sau HTML nơi bạn muốn hiển thị nút như bạn:

<div id="fb-like-wrapper"> 
    <div id="fb-root"></div> 
    <div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite" 
    data-layout="button_count" data-action="like" 
    data-show-faces="false" data-share="false"></div 
</div>

Có bạn đi :)

Nguồn

2014-02-16 00:11:10 Karl

Thêm thẻ này vào css của bạn

.fb-like{height:20px}

Thêm thuộc tính chiều rộng dữ liệu và chiều cao dữ liệu vào

<div class="fb-like" data-width="124px" data-height="20px"></div>

Điều này cũng ngăn thanh cuộn dọc xuất hiện nếu không cần thiết.

Nguồn

2014-07-06 17:01:12

Nút Thích trên Facebook Gây Thanh cuộn Ngang

Trả lời

Các vấn đề liên quan