Question

I am having an issue in Firefox where the tags have a border that sticks out past the containing div despite no border being set.

Screenshot in other browsers and what it should look like:

和Firefox中的

带有代码的单个文件：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<div class="sticky-links">
    <ul>

        <li>
            <div class="unskew">
                <a href='www.theonion.com'>
                    <i class="fa fa-rss" aria-hidden="true"></i>
                    The Onion
                </a>
            </div>
        </li>
        <li>
            <div class="unskew">
                <a href='http://www.google.com'>
                    <i class="fa fa-google-plus" aria-hidden="true"></i>
                    Google
                </a>
            </div>
        </li>
        <li>
            <div class="unskew">
                <a href='asfd'>
                    <i class="fa fa-facebook" aria-hidden="true"></i>
                    some text
                </a>
            </div>
        </li>
    </ul>
</div>

<style>
    .sticky-links ul{
        position: fixed; 
        right: -15px;
        top: 50%;
        z-index: 999;
    }

    .sticky-links li{
        /*border: 1px solid black;*/
        text-transform: uppercase;
        /*transition-duration: 0.2s;*/
        background-color: black;

        transform: skew(20deg);
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        padding: 5px;

        padding-right: 15px;
        list-style: none;   
        margin-bottom: 10px;
    }
    .sticky-links li:hover{
        background-color: #f60; 
    }


    .sticky-links li div a{
        padding: 5px;
        text-transform: uppercase;
        /*transition-duration: 0.2s;*/
        background-color: black;

        font-size: 1.75rem;
        color: white;
        text-decoration: none;
    }

    .unskew{
        transform: skew(-20deg);
        -webkit-transform: skew(-20deg);
        -moz-transform: skew(-20deg);
        -o-transform: skew(-20deg);
    }
    /*font awesome icon padding */
    .unskew a i{
        padding-right: 5px; 
    }
</style>

<script>
$('.sticky-links li').hover(
        //mouse enter
        function(){
            $(this).find('*').css('background-color', '#f60');
        },
        //mouse leave
        function(){
            $(this).find('*').css('background-color', '#000');
        }
        );
</script>

和带有相关代码的jsfiddle：

https://jsfiddle.net/cyetuh82/2/

可以检查页面，我们看到它实际上是造成此问题的内在原因。

我尝试了很多css更改，例如设置border：无！在所有元素上都很重要，clear：两个都如此。

注意：jsfiddle看起来不太一样，但是您仍然可以从div中看到一些突出的信息，我相信它们会具有相同的根本原因。

谢谢

Kalen

编辑：

jsfiddle似乎没有捕获到根本问题，这是一个嵌套的问题，所有内容都挂在里面（当我检查页面上的元素时可以看到）

Answer 1

您只需要在代码中添加一行CSS规则即可。将padding-left: 10px添加到CSS选择器.sticky-links li中。这是更新的CSS。

.sticky-links li {
  text-transform: uppercase;
  background-color: black;
  transform: skew(20deg);
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  padding: 5px;
  padding-right: 15px;
  list-style: none;
  margin-bottom: 10px;
  padding-left: 10px;
}

而且，我不明白为什么要使用jquery代码来实现背景颜色属性。您已经添加了CSS规则来实现它。

Firefox CSS问题，<a> inside skewed div

1 个答案: