HTML

Question

我无法弄清楚为什么在Firefox中没有正确显示红色按钮。铬合金看起来不错。

这是小提琴： Fiddle

那是我的铬：

那是我的firefox：

我的HTML：

<div class="bilder_bearbeiten col-lg-12">   

            <div class="img-element-del">
                <img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
                <a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
            </div>

            <div class="img-element-del">
                <img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
                <a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
            </div>

            <div class="img-element-del">
                <img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
                <a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
            </div>

            <div class="img-element-del">
                <img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
                <a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
            </div>

            <div class="img-element-del">
                <img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
                <a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
            </div>
 </div>

我的CSS：

.bilder_bearbeiten img {
    width: 155px;
    height: 100px;
    margin-bottom: 5px;
    border-radius: 2px;
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}

.img-element-del {
    padding-bottom: 40px;
    display: inline-block;
}

.deletebtn {
    border-radius: 0;
    width: 155px;
    position: absolute;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 5px 0;
}

好吧，我不知道要添加什么细节。我试图改变firefox浏览器开发工具中的所有内容，但却无法实现与chrome相同的行为。

Answer 1

https://jsfiddle.net/7vz89t4d/2/

.img-element-del {
    position: relative; /* this is new */
    padding-bottom: 40px;
    display: inline-block;
}

.deletebtn {
    border-radius: 0;
    width: 155px;

  color: white;
  text-align: center;
  text-decoration: none;
  padding: 5px 0;

  position: absolute;
  bottom: 0;  /* this is new */
  left: 0;  /* this is new */
}

简短说明： 如果使用position:absolute;，请同时将position:relative;设置为父级。那么绝对总是来自父母。

此图片可能有所帮助：

图片来自css-tricks.com/absolute-positioning-inside-relative-positioning，这进一步解释了它。

上面的代码图片如下：

＆＃13;

.parent {
  position: relative;
  width: 400px;
  height: 300px;
  border: solid 3px CHOCOLATE;
}

.absolute-one,
.absolute-two,
.absolute-three  {
  position: absolute;
  background-color: CHOCOLATE;
  color: white;
  padding: 10px;
  width: 100px;
  height: 100px;
}

.absolute-one {
  top: 0;
  left: 0;
}

.absolute-two {
  bottom: 5px;
  left: 10px;
}

.absolute-three  {
  top: 30%;
  right: -25px;
}

＆＃13;

<div class="parent">
  <div class="absolute-one">
    top: 0;
    left: 0;
  </div>
  <div class="absolute-two">
    bottom: 5px;
    left: 10px;
  </div>
  <div class="absolute-three">
    top: 30%;
    right: -25px;
  </div>
</div>

＆＃13;

Answer 2

我在这里更新了你的小提琴 - ＆gt; https://jsfiddle.net/7vz89t4d/3/

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.bilder_bearbeiten img {
	width: 155px;
	height: 100px;
	margin-bottom: 5px;
	border-radius: 2px;
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
  
}

.img-element-del {
	padding-bottom: 40px;
	display: inline-block;
  
  position: relative;
  margin-bottom: 20px;
}

.deletebtn {
	border-radius: 0;
	width: 155px;
	position: absolute;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 5px 0;
  
  bottom: 0;
  left: 0;
}

＆＃13;

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="bilder_bearbeiten col-lg-12">	

			<div class="img-element-del">
				<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
				<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
			</div>

			<div class="img-element-del">
				<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
				<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
			</div>

			<div class="img-element-del">
				<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
				<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
			</div>

			<div class="img-element-del">
				<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
				<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
			</div>

			<div class="img-element-del">
				<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
				<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
			</div>

 </div>

＆＃13;

Answer 3

尝试在您的deletebtn css

中添加"Left:0;"和"bottom:0;"

Answer 4

我在这里开了一个新的。您不必使用绝对位置或类似的位置。

jsfiddle

我刚将每个“图像”和“a”放在div

中

<div class="bilder-row">
<img src="..."/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>

和风格：

.bilder-row{width:160px;float:left;}

这将解决问题。

Answer 5

使用标记设置页面样式时，通常会避免在布局中进行绝对定位。绝对定位的物品可以实现非常脆弱的布局，使响应式设计非常具有挑战性。只能将它作为最后的手段。我建议你充分利用Bootstrap。它是一个非常强大的工具，但对你的标记很有见解。在充分利用Bootstrap网格的同时，我将您的示例重构为更具响应性的内容：http://getbootstrap.com/css/#grid

以下是完整的Codepen示例：http://codepen.io/toddsby/pen/pRLQem

在Firefox 51（macOS）上查看

HTML

<div class="row gutter-5">
  <div class="img-element-del col-xs-3">
    <img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg" />
    <div class="deletebtn-container">
      <a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
    </div>
  </div>
</div>

CSS

/** custom Bootstrap grid gutter **/
.row.gutter-5 {
  margin-left: -10px;
  margin-right: -10px;
}

.gutter-5 > [class*="col-"], .gutter-5 > [class*=" col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

我已将这些项目移动到col-3（12/4）网格中。然后设置图像和按钮的样式，占据其100％的容器。这允许灵活且响应灵敏的布局。然后，您可以使用Bootstrap断点来定位不同的设备。即<div class="img-element-del col-xs-1 col-md-2 col-lg-3">

注意：使用Flexbox时，此布局非常简单。截至2016年，Flexbox受到所有主流浏览器的支持！您可以在此处详细了解Flexbox：https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af

Answer 6

尝试添加position: relative; to .img-element-del
并且.deletebtn添加此属性：

z-index: 1;
left: 0;
bottom: 10px;

CSS绝对定位按钮在Firefox +小提琴中不起作用

6 个答案:

HTML

CSS