下面是一个使用HTML和CSS解决不同浏览器下下拉菜单样式问题的示例代码：

HTML代码：

  选项1
  选项2
  选项3

CSS代码：

/* 通用样式 */
.custom-select {
  appearance: none; /* 清除浏览器默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none; /* 清除聚焦时的外边框 */
  padding: 5px 10px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

/* Chrome和Safari浏览器样式 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .custom-select::-webkit-select-placeholder {
    color: #999; /* 修改占位文字颜色 */
  }
}

/* Firefox浏览器样式 */
@-moz-document url-prefix() {
  .custom-select::-moz-placeholder {
    color: #999; /* 修改占位文字颜色 */
  }
}

/* IE浏览器样式 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .custom-select {
    padding-right: 20px; /* 增加右侧箭头的间距 */
    background-image: url(arrow.png); /* 自定义箭头图标 */
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px;
  }
}

在这个示例中，我们使用了appearance属性来清除不同浏览器下下拉菜单的默认样式，并使用媒体查询和浏览器前缀来针对不同浏览器应用特定的样式。

在Chrome和Safari浏览器中，我们使用了::-webkit-select-placeholder伪元素来修改占位文字的颜色。

在Firefox浏览器中，我们使用了::-moz-placeholder伪元素来修改占位文字的颜色。

在IE浏览器中，我们使用了-ms-high-contrast媒体查询和background-image属性来增加箭头图标，并为右侧箭头留出一些空间。

根据你的需求，你可以根据不同的浏览器和样式要求，自定义以上示例中的样式。