Question

https://imgur.com/rq5n6E5

如果您看一下图像，您会看到我的菜单栏被放置在div中而不是放在主页面上..解释原因看起来这是因为我和＃的网站39; m创建此配置文件并不允许某些事情完成，所以我必须放置一些div -1500px并使用ease-in-out将它带到目标位置，希望这张照片有助于理解这个问题。

好的，所以我终于让一切工作正常，但现在我的问题是镀铬..我不知道镀铬更新了什么或什么？但是一切都在mozilla firefox上运行完美，但不是在Chrome上？这是有原因的吗？

问题在于right_menu / Sub_menu或者什么......甚至是渐变？我不确定为什么它在mozilla上工作得很好而不是镀铬......到目前为止，所有东西都能正常使用镀铬

Js Fiddle

＆＃13;

#right_menu {
  background: -webkit-linear-gradient(#FF00FF, #77047e);
  background: -o-linear-gradient(#FF00FF, #77047e);
  background: -moz-linear-gradient(#FF00FF, #77047e);
  background: linear-gradient(#FF00FF, #77047e);
  display: table;
  font-size: 15px;
  line-height: 46px;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 46px;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: right top 0;
  width: 100vh;
  white-space: nowrap;
}

#right_menu li {
  display: table-cell;
}

#right_menu li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
}

.sub_menu
/* same as #right_menu li ul */

{
  display: none;
  left: 18%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -46px;
}

.sub_menu li a {
  background: -webkit-linear-gradient(#77047e, #FF00FF);
  background: -o-linear-gradient(#77047e, #FF00FF);
  background: -moz-linear-gradient(#77047e, #FF00FF);
  background: linear-gradient(#77047e, #FF00FF);
}

#right_menu li:hover .sub_menu {
  display: block;
}

#right_menu>li a:hover {
  background: #FF00FF;
}

＆＃13;

<ul id="right_menu">
  <li><a href="#profile_comments">Message Me</a></li>
  <li><a href="#">Galleries</a>
    <ul class="sub_menu">
      <li><a href="#profile_password_photo_galleries">PW Gallery</a></li>
      <li><a href="#profile_photo_galleries">My Gallery</a></li>
    </ul>
  </li>
  <li><a href="#profile_interests_content">Interest</a></li>
  <li><a href="#profile_about_me_friends">About Me</a></li>
  <li><a href="#home_page">Home</a></li>

＆＃13;

Answer 1

这些属性可以解决问题：

#right_menu {

  width:100vh;
  top: 0;
  transform-origin: right bottom;
  transform: translate(-100%, -100%) rotate(-90deg);
  left: 100%;
}

选中此fiddle

Answer 2

在CSS文件中添加以下CSS代码。此解决方案仅修改右侧菜单外观的Chrome行为，其余部分将像以前一样工作。

/* Chrome */
@media and (-webkit-min-device-pixel-ratio:0) {
  #right_menu{display:initial;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    #right_menu{display:initial;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
   #right_menu{display:initial;} 
}

找到你的修改后的代码，如下： -

html,
body {
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

b,
strong {
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

ol,
ul {
  list-style: none;
}

li {
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: '';
  content: none;
}

sub,
sup,
small {
  font-size: 75%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

svg {
  overflow: hidden;
}

body {
  font-family: Verdana, Geneva, sans-serif;
  color: #FFF;
  font-size: 12px;
  font-family: Trebuchet MS, Arial, Helvetica;
  background: url() no-repeat center 0, #000 url() left top;
  background-size: 1670px 950px;
}

#header_bar,
#profile_header,
#profile_main_photo,
#footer_bar {
  display: none;
  list-style-type: none;
}

#right_menu {
  background: -webkit-linear-gradient(#FF00FF, #77047e);
  background: -o-linear-gradient(#FF00FF, #77047e);
  background: -moz-linear-gradient(#FF00FF, #77047e);
  background: linear-gradient(#FF00FF, #77047e);
  display: table;
  font-size: 15px;
  line-height: 46px;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 46px;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: right top 0;
  width: 100vh;
  white-space: nowrap;
}

#right_menu li {
  display: table-cell;
}

#right_menu li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
}

.sub_menu
/* same as #right_menu li ul */

{
  display: none;
  left: 18%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -46px;
}

.sub_menu li a {
  background: -webkit-linear-gradient(#77047e, #FF00FF);
  background: -o-linear-gradient(#77047e, #FF00FF);
  background: -moz-linear-gradient(#77047e, #FF00FF);
  background: linear-gradient(#77047e, #FF00FF);
}

#right_menu li:hover .sub_menu {
  display: block;
}

#right_menu>li a:hover {
  background: #FF00FF;
}

#home_page {
  width: 960px;
  height: 468px;
  position: fixed;
  top: 300px;
  left: 25%;
  padding: 40px;
  z-index: -999999;
  transition: left .4s ease-in-out;
}

#profile_about_me_friends .heading {
  text-transform: uppercase;
  font-size: 38px;
  color: #FF00FF;
  font-weight: normal;
  border-bottom: 1px dotted #666666;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

#profile_about_me_friends {
  width: 400px;
  height: 600px;
  color: #000000;
  font-family: "Baskerville Old Face", serif;
  font-style: italic;
  font-size: 20px;
  background-color: rgba(0, 0, 255);
  position: absolute;
  top: 200px;
  right: -1200px;
  padding: 40px;
  transition: left 0 ease-in-out;
}

#profile_about_me_friends_content {
  color: #000000;
  font-family: "Baskerville Old Face", serif;
  font-style: italic;
  font-size: 20px;
}

#profile_about_me_friends:target {
  right: 80%;
  top: 0;
  margin-right: -520px;
}

#profile_about_me_friends .profile_section_content {
  overflow-y: scroll;
  height: 580px;
}

#profile_interests_content .heading {
  text-transform: uppercase;
  font-size: 45px;
  color: #FF00FF;
  font-weight: normal;
  border-bottom: 1px dotted #666666;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

#profile_interests_content {
  width: 400px;
  height: 600px;
  color: #000000;
  font-family: "Baskerville Old Face", serif;
  font-style: italic;
  font-size: 20px;
  background-color: rgba(0, 0, 255);
  position: absolute;
  top: 200px;
  right: -1200px;
  padding: 40px;
  transition: left 0 ease-in-out;
}

#profile_interests_content:target {
  right: 80%;
  top: 0;
  margin-right: -520px;
}

#profile_interests_content .profile_section_content {
  overflow-y: scroll;
  height: 580px;
}

#profile_comments .heading {
  text-transform: uppercase;
  font-size: 38px;
  font-weight: normal;
  border-bottom: 1px dotted #666666;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

#profile_comments {
  width: 400px;
  height: 600px;
  color: #FF00FF;
  font-family: "Baskerville Old Face", serif;
  font-style: italic;
  font-size: 20px;
  background-color: rgba(0, 0, 255);
  position: absolute;
  top: 200px;
  right: -1200px;
  padding: 40px;
  transition: left 0 ease-in-out;
}

#profile_comments:target {
  right: 80%;
  top: 0;
  margin-right: -520px;
}

#profile_comments .profile_section_content {
  overflow-y: scroll;
  height: 580px;
  background-color: rgba(0, 0, 0, 0.6);
}

#profile_photo_galleries .heading {
  text-transform: uppercase;
  font-size: 38px;
  color: #FF00FF;
  font-weight: normal;
  border-bottom: 1px dotted #666666;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

#profile_photo_galleries {
  width: 400px;
  height: 600px;
  color: #000000;
  font-family: "Baskerville Old Face", serif;
  font-style: italic;
  font-size: 20px;
  background-color: rgba(0, 0, 255);
  position: absolute;
  top: 200px;
  right: -1200px;
  padding: 40px;
  transition: left 0 ease-in-out;
}

#profile_photo_galleries:target {
  right: 80%;
  margin-right: -520px;
  top: 0;
}

.photo_gallery {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 95.7%;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.photo_gallery .heading {
  text-transform: uppercase;
  font-size: 38px;
  font-weight: normal;
  border-bottom: 1px dotted #666666;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.photo_gallery .images a {
  display: block;
  float: left;
  border: 5px solid #000;
  margin-right: 10px;
  margin-bottom: 10px;
}

.photo_gallery_preview {
  border: 1px solid #333;
  overflow: auto;
  padding: 20px 15px;
  width: 100px;
  background-color: #000;
}

.photo_gallery_name a {
  color: #FFF;
  margin-bottom: 20px;
  display: block;
  text-transform: uppercase;
}

.photo_gallery_link {
  display: block;
  margin-bottom: 15px;
}

.photo_gallery_count {
  font-style: italic;
  color: #666;
}

#profile_password_photo_galleries .heading {
  text-transform: uppercase;
  font-size: 38px;
  color: #FF00FF;
  font-weight: normal;
  border-bottom: 1px dotted #666666;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

#profile_password_photo_galleries {
  width: 400px;
  height: 600px;
  color: #000000;
  font-family: "Baskerville Old Face", serif;
  font-style: italic;
  font-size: 20px;
  background-color: rgba(0, 0, 255);
  position: absolute;
  top: 200px;
  right: -1200px;
  padding: 40px;
  transition: left 0 ease-in-out;
}

#profile_password_photo_galleries {
  right: 300%;
  margin-right: -520px;
}

.password_photo_gallery_preview {
  border: 1px solid #333;
  overflow: auto;
  padding: 20px 15px;
  width: 100px;
  background-color: #000;
}

#profile_password_photo_galleries:target {
  right: 80%;
  top: 0;
  margin-right: -520px;
}

.password_photo_gallery_name a {
  color: #FFF;
  margin-bottom: 20px;
  display: block;
  text-transform: uppercase;
}

.password_photo_gallery {
  position: absolute;
  top: 850px;
  right: 515px;
  width: 500px;
  background-color: #121212;
  padding: 40px;
  overflow: auto;
}

h3 {
  font-size: 18px;
  position: fixed;
  left: 23px;
  top: 120px;
  color: #FF00FF;
}

h4 {
  font-size: 18px;
  position: fixed;
  left: 15px;
  top: 40px;
  color: #FF00FF;
}


/* Chrome */

@media and (-webkit-min-device-pixel-ratio:0) {
  #right_menu {
    display: initial;
  }
}


/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  #right_menu {
    display: initial;
  }
}


/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0) {
  #right_menu {
    display: initial;
  }
}

<ul id="right_menu">
  <li><a href="#profile_comments">Message Me</a></li>
  <li><a href="#">Galleries</a>
    <ul class="sub_menu">
      <li><a href="#profile_password_photo_galleries">PW Gallery</a></li>
      <li><a href="#profile_photo_galleries">My Gallery</a></li>
    </ul>
  </li>
  <li><a href="#profile_interests_content">Interest</a></li>
  <li><a href="#profile_about_me_friends">About Me</a></li>
  <li><a href="#home_page">Home</a></li>

Answer 3

将显示属性从table更改为block，将right属性更改为菜单的宽度。

例如：

#right_menu{
      display: block;
      right: 46px;
}

这将解决您的问题。

菜单栏退出工作

3 个答案: