如何删除像框周围的边框答案

【问题标题】：How To Remove Border Around Like Box如何删除像框周围的边框
【发布时间】：2011-09-16 22:35:59
【问题描述】：

我知道现在不可能将您自己的 css 链接到 like-box 来自定义它，但是这个问题似乎可以使用 like box 向导来完成。我想要做的就是将边框颜色更改为与我的页面背景相同的颜色，这样根本就没有边框。奇怪的是，我在边界字段中放置的任何颜色似乎都不会影响结果。这是我的网站：http://www.uplatindance.com/SDO/

这是嵌入代码

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-border-color="black" data-stream="false" data-header="false"></div>

想法？

【问题讨论】：

标签： facebook facebook-like customization

【解决方案1】：

这是一个有趣的问题，因为我们无法访问控制 HTML 元素样式的 CSS，因为它位于 iframe 内部。然而，我们可以像这样用包含 div 来包装 div：

<div class="fb-container">
<div id="bg-box" class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-border-color="black" data-stream="false" data-header="false"></div>
<div>

fb-container div 将在水平和垂直方向上缩短 2px 以切掉边框。这是 CSS：

.fb-container {
    width: 258px;
    height: 63px;
    overflow: hidden;
}

.fb-container > div {
     margin: -1px 0px 0px -1px;  
}

这是一个 jsfiddle 现场演示：

http://jsfiddle.net/jK97V/

【讨论】：

太好了，我不敢相信我以前没想过这个解决方案。这有点临时，我不敢相信 Facebook 有这么少的选项来自定义他们的like-box，但现在这可以解决问题。谢谢。

【解决方案2】：

<fb:fan profile_id="your-page-id-here" stream="0" connections="21" width="403" height="360" data-header="false" show-border="false"></fb:fan>

删除边框的属性是show-border="false"，这是解决方案，因为它也适用于背景图像。更改边框颜色并不是一个严肃的解决方案，因为它只会隐藏边框并且仅适用于纯色背景。

【讨论】：

【解决方案3】：

将以下属性添加到您的fb-like-box div：

data-show-border="false"

我的意思是；

<div class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-show-border="false" data-stream="false" data-header="false"></div>

【讨论】：

【解决方案4】：

添加此属性对我有用：

data-border-color="#fff"

或者对于黑暗方案：

data-border-color="#333"

【讨论】：

【解决方案5】：

最干净的解决方案是在 facebook like-box 生成器本身内配置边框；

http://developers.facebook.com/docs/reference/plugins/like-box/#

切换“显示边框”复选框并使用单击“获取代码”后生成的输出代码。

【讨论】：

【解决方案6】：

可能 Facebook 正在为该按钮提供自己的 CSS。尝试使用 JavaScript 或您自己的 CSS 覆盖它。

在 JavaScript 中，我会执行以下操作：

<script>
function init(){
  div = document.getElementById('connect_widget_like_button clearfix like_button_no_like');
  div.style.background-color = some color
}
</script>
<body onload="init();">

我会以这种方式使用 JavaScript 来保证浏览器首先设置 Facebook 的东西，然后用你想要的颜色覆盖它。

考虑两件事：

它可能是您需要使用的另一个元素（使用“检查元素”选项来查看哪些可能是正确的。
我无法对此进行测试。我将您的代码复制到计算机上的文件中，但没有显示任何内容。

【讨论】：

我对这个解决方案非常感兴趣，因为它可能是一种在 iframe 中更合理地设置元素样式的方法。您将如何使用 javascript 更改链接文本的颜色？链接的规则是：.fan_box a { color: #CCC; } 我确实在某处读到，不可能为不在同一个域上托管的东西更改 css 元素，所以这可能行不通。另外，如果你想测试它，我相信你需要先发布它才能看到任何东西。
它是这样工作的。元素有（或应该有）一个独特的字段。假设你有一个这样的 div：
你可以在 javascript 函数中调用它： var x1 = document.getElementById('abc');然后你有一个指向那个 div 的指针。并在 javascript 的下一行执行此操作 'x1.style.background = "#CCC"; -- 但请注意：我查看了 FB 生成的 html - 您必须尝试很多 id，直到找到正确的，所以要做好准备。